在NativeScript中使用Angular2获取元素值-Java 学习之路

我有一个列表，我想获得列表项的值 .

该观点如下

<ListView  [items]="myItems" (itemTap)="onItemTap($event)">
<template let-item="item" let-i="index" let-odd="odd" let-even="even">
    <StackLayout [class.odd]="odd" [class.even]="even">
        <Label #myFoo id="grocery-list" [text]='"Value is: " + i'></Label>
    </StackLayout>
</template>

在打字稿中我有以下内容

import { Component,ViewChild,ElementRef } from "@angular/core";
import {topmost} from "ui/frame";
import {ListView} from "ui/list-view";
 export class AppComponent {

 @ViewChild("myFoo") myFooRef: ElementRef;

    public myItems = [];
    constructor() {
          this.myItems.push("1");
          this.myItems.push("2");
          this.myItems.push("3");

   }

    onItemTap(event){

    }
}

我可以做以下事情来获得 Value

onItemTap(event){
    let itemValue = this.myItems[event.index];
     console.log(itemValue);     
    }

这将获得数组中的值 . 但这只会返回数组中的值 .

正如您在视图中看到的那样，我将字符串 Value is 附加到该值 .

那么如何访问被点击的标签的 text 属性 .

1 回答

您可以通过 args.view 访问商品模板的视图 . 从那时起，我假设您的列表项中将包含不同的文本，因此通过绑定（使用Angular索引）为每个Label创建唯一ID非常重要 . 所以你可以做到以下几点：

<ListView  [items]="myItems" (itemTap)="onItemTap($event)">
    <template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [class.odd]="odd" [class.even]="even">
            <Label [id]="'lbl' + i" [text]='"Value is: " + i'></Label>
        </StackLayout>
    </template>
</ListView>

然后在你的 onItemTap

public onItemTap(args: ItemEventData) {
    console.log("Item Tapped at cell index: " + args.index);
    console.log(args.object); // prints something like ListView(137)
    console.log(args.view); // prints something like StackLayout(265)

    var lbl = <Label>args.view.getViewById("lbl" + args.index);

    console.log(lbl.text); // prints the actual text of the tapped label
}

回复于 2024-04-30T06:15:49+08:00

在NativeScript中使用Angular2获取元素值

1 回答

相关问题