首页 文章

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

提问于
浏览 次
1

  • 我创建了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 file:

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
angular typescript nativescript angular2-nativescript

1 回答

  • 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>
    回复于

相关问题