代码之家 › 专栏 › 技术社区 › Stephen Alejandro Alcalde

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

angular2-nativescript nativescript typescript angular

1

Stephen Alejandro Alcalde · 技术社区 · 9 年前

我已经创建了listview。对于每个listview项,我都有一个
For Example : 我正在单击第0个索引listview项按钮。什么时候它正在更改所有按钮文本。
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>

  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"; 

  }
 }

命令:

App Available ? true
button id : 0
True Test

1 回复 | 直到 9 年前

1

Fetrarij 9 年前

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

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>