Question

我有一个问题列表，每个问题你可以选择答案A，B或什么都没有。到目前为止我所看到的是，当点击一个按钮时，颜色变为绿色。我想为每个问题项实现这个。我怎样才能做到这一点？

<ion-item class="text" *ngFor="let item of items | async>
   <button> (click)="itemClicked(item.AnswerA)" [class.active]="selectedItem == item.AnswerA">Answer A</button>
   <button> (click)="itemClicked(item.AnswerA)" [class.active]="selectedItem == item.AnswerB">Answer B</button>
</ion-item>

itemClicked(item) {
  this.selectedItem = item;
}

.active {
        background-color: green;
    }

Answer 1

您的Answer A和Answer B按钮class.active仅基于一个selectedItem。您可以为每个问题添加selectedItem，然后执行以下更改：

<ion-item class="text" *ngFor="let item of items | async>
  <button> (click)="itemClicked(item, item.AnswerA)" [class.active]="item.selectedItem == item.AnswerA">Answer A</button>
  <button> (click)="itemClicked(item, item.AnswerA)" [class.active]="item.selectedItem == item.AnswerB">Answer B</button>
</ion-item>

itemClicked功能：

itemClicked(item, answer) {
  // keep selectedItem for each item
  item.selectedItem = answer;
}

Answer 2

现在，做到这一点的方法是：

<button [attr.newColor]="addAttribute ? '' : null">Test</button>

因此，如果addAttribute的计算结果为true，它将添加newColor属性，如果计算结果为false，则根本不会添加该属性。

会议应用程序在此处使用以下模式的示例： Changing button color or icon dynamically

点击每个项目的按钮，将颜色更改为绿色

2 个答案: