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中维护一个对象数组，如下所示：

string = "asft1op41opv"
convertedString = ""

p = re.compile('[aeiou0-9]')
vowelsAndNumbers = p.findall(string)
string = p.sub("",string)

i = 0
for c in string:    
    convertedString += c + ''.join(vowelsAndNumbers[i:i+1])
    i+=1

# if remaining vowels, add to convertedString
convertedString += ''.join(vowelsAndNumbers[i:])

print convertedString

现在，在你的.html：

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

doSomething（）将成为：

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

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

2 个答案: