单击列表视图项目中的按钮时，只有相应的按钮文本应该在 angular2 nativescript 中更改

Question

我已经创建了 listview.For 每个列表视图项我有一个按钮。单击该按钮时，我需要更改文本。
For Example : 我正在单击第 0 个索引列表视图项按钮。什么时候单击该按钮，它只需要更改该按钮文本。但它正在更改所有按钮文本。
What's happening now : 当在列表视图项目中点击该按钮时，它正在更改所有按钮中的文本。
What I need : 在列表视图项中单击该按钮时，我需要仅更改该特定按钮中的文本。

html:

<StackLayout class="page">
    <ListView [items]="items" class="list-group">

    <ng-template let-item="item" let-myIndex="index">

   <GridLayout  rows="auto" columns="*, auto" >

        <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" row="0" col="0" class="list-group-item"> </Label>

        <Button  text= "{{textBtn}}" (tap) ="checkInstall($event)" row="0" col="1" [id]="myIndex"> </Button>   ----> Getting button index

   </GridLayout>

   </ng-template>

  </ListView>
</StackLayout>

ts 文件:

  checkInstall(args: EventData) : void{

    let button = <Button>args.object;

    this.getId = args.object.get("id");

    if(this.getId == 0) {     ---> based on the button index 0, checking app is installed or not.   

     appavailability.available("com.facebook.lite").then((avail: boolean) => {

    console.log("App available? " + avail);

    if(avail == true){

    console.log("button id :"+ args.object.get("id"));

    this.textBtn = "Remove"; 

    console.log("True", "Test");

    } else {

    console.log("False", "Test");

    }

  });

  } else {


     this.textBtn = "Install"; 

  }
 }

cmd:

当点击第 0 个位置的列表视图按钮时，我得到这个：

App Available ? true
button id : 0
True Test

Answer 1

你那里已经有了索引，你不需要将它分配给id，你可以直接在函数中传递它(tap)="checkInstall($event, myIndex)"
textBtn是所有按钮的默认按钮文字，好吧，但是如果你改变它，所有按钮文字都会改变。要根据单击的按钮更改按钮文本，因为您已经在组件中获得了 Button 对象，所以只需使用它：

let button = <Button>args.object; button.set('text', 'Remove'); // this will change the current button clicked

所以你的整个代码可以是：

checkInstall(args: EventData, index: number): void {
    let button = <Button>args.object;
    if (index === 0) {
        appavailability.available("com.facebook.lite").then((avail: boolean) => {
            console.log("App available? " + avail);
            if (avail == true) {
                console.log("button id :" + args.object.get("id"));
                button.set('text', 'Remove');
                console.log("True", "Test");
            } else {
                console.log("False", "Test");
            }
        });
    } else {
        button.set('text', 'Install');
    }
}

在您看来：

<Button text="{{textBtn}}" (tap)="checkInstall($event, myIndex)" row="0" col="1"></Button>

单击列表视图项目中的按钮时，只有相应的按钮文本应该在 angular2 nativescript 中更改

When click on the button in listview item, only that appropriate button text should change in angular2 nativescript

typescript

nativescript

angular2-nativescript

angular