如何在 Angular 2 / ionic 2 中更改特定属性值

Question

所以我有这个html，它使用*ngFor动态创建卡片

<ion-card *ngFor="let numbers of [0,1,2,3]; let i = index">
    <ion-card-content>
      <ion-card-title clear>
           Card {{i}}
       </ion-card-title>
    </ion-card-content>

    <button ion-button block class="blockbutton" (click)="doSomething(i)">
      <ion-icon [name]="iconName" class="plussign"></ion-icon>
      <div> Join Room </div>
    </button>
</ion-card>

这是我的.ts

export class FeedPage {
    iconName : string;
    constructor(public navCtrl: NavController) {
     this.iconName  = 'add-circle';
    }
  }
public doSomething(item): void{
    console.log(item);
    this.iconName = 'checkmark-circle';
  }

因此，此代码在单击"阻止按钮"时，将所有"阻止按钮"的所有图标变为checkmark-circle

如何仅更改该特定按钮的图标，即 [name]归因于checkmark-circle .

我已经成功地检索了该元素的index。但是我如何只修改那个 特定按钮 ？

Answer 1

有一个iconNames数组。

  <ion-icon [name]="iconName[i]" class="plussign"></ion-icon>

在组件端：

public doSomething(item): void{
    console.log(item);
    this.iconName[item] = 'checkmark-circle';
    }
  }

不过，您必须根据卡的数量设置整个阵列。

iconNames:string[]=[];
    constructor(public navCtrl: NavController) {
        //loop through your card count and push initial value.
        iconNames.push(`add-circle`);

   }

Answer 2

数组中的每个项目都应具有不同的图标名称。

首先在 .ts 中维护一个对象数组，如下所示：

private _array = [{"iconName" : "name1"},{"iconName" : "name2"}]; // And so on..

现在，在您的.html中：

<ion-card *ngFor="let numbers of _array let i = index">
    <ion-card-content>
       <ion-card-title clear>
           Card {{i}}
       </ion-card-title>
    </ion-card-content>

    <button ion-button block class="blockbutton" (click)="doSomething(numbers)">
      <ion-icon [name]="numbers.iconName" class="plussign"></ion-icon>
      <div> Join Room </div>
    </button>
</ion-card>

doSomething(( 将变为：

public doSomething(item): void{
    console.log(item);
    item.iconName = 'checkmark-circle';
}