在Angular 2和Ionic 2 *ngfor中，如果我单击任何一个元素，则反映所有元素

Question

如果我单击 playNote（note）函数，但它在ngfor loop中更改了所有 [name] =" myicon" 。我只想更改单击一个...

home.html

<ion-item color="theme" class="note-block" *ngFor="let note of notes; let i = index" >
      <button class="action-btn" ion-button icon-left clear small (click)="playNote(note)">
        <ion-icon color="darker" [name]="myIcon"></ion-icon>
      </button>
</ion-item>

home.ts

myIcon: string = "play";

playNote(note){
    if(this.myIcon === "play"){
        this.myIcon = "pause"
    }
    else if(this.myIcon === "pause"){
        this.myIcon = "play";
    }
}

Answer 1

您有两种可能性：

第一个，您可以像这样定义Myicon

myIcon: string[] = [];

然后

playNote(note){
    if(this.myIcon[note] === "play"){
        this.myIcon[note] = "pause"
    }
    else if(this.myIcon[note] === "pause"){
        this.myIcon[note] = "play";
    }
}

在模板中

<button class="action-btn" ion-button icon-left clear small (click)="playNote(note)">
        <ion-icon [name]="myIcon[note.id]?myIcon[note.id] : myIcon[note.id] = 'play'"></ion-icon> <!-- default value to play -->
</button>

第二个，创建一个包装器组件（列表注释）和单个Note组件。您所有的单个项目都具有不同的范围，因此您可以在单个项目组件中安全地使用它的方法：

playNote(note){
    if(this.myIcon === "play"){
        this.myIcon = "pause"
    }
    else if(this.myIcon === "pause"){
        this.myIcon = "play";
    }
} 

这些是未经测试的代码。可能需要进行一些调整这是一个工作的plunkerhttp://plnkr.co/edit/boqb37aqkbysrzzds5vy？p = preview

编辑：这是一个快速修复http://plnkr.co/edit/svy8ikhxnkcdb4ya52ho?p=preview

在此示例中，我使用布尔

在模板中：

<ion-item *ngFor="let note of notes; let i = index">
     <h2>{{note.name}}</h2>
       <button class="action-btn" ion-button icon-left clear small (click)="playNote(note)">
         <ion-icon *ngIf = "!myIcon[note.id]" [name]="'play'"></ion-icon>
         <ion-icon *ngIf = "myIcon[note.id]" [name]="'pause'"></ion-icon>
       </button>
   </ion-item>

组件

myIcon: boolean[] = [];
playNote(note){
    this.myIcon[note.id] = !this.myIcon[note.id]
}