При нажатии на кнопку в элементе списка, только соответствующий текст кнопки должен измениться в angular2 nativescript

  • Я создал listview. Для каждого элемента listview у меня есть одна кнопка. При нажатии на эту кнопку мне нужно изменить текст.

  • 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

nativescript typescript angular angular2-nativescript
person Steve    schedule 30.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

  1. У вас уже есть индекс, вам не нужно назначать его id, вы можете просто передать его в функции (tap)="checkInstall($event, myIndex)"

  2. 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>
person Fetrarij    schedule 30.06.2017