Question

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

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>

单击listview项目中的按钮时，只应在angular2 nativescript中更改相应的按钮文本

1 个答案: