点击卡片上的按钮，更改卡片内容样式

Question

在我的组件中，我已经通过* ngFor生成了mat-card（这是另一个组件）。卡片上有一个按钮，单击时应为相同的卡片元素设置样式（我能够做到）。但是，如果我单击另一张卡片按钮，则应为其样式设置一个样式，并将上一张卡片的样式恢复为原始样式。 （本部分的主要问题）。 下面是示例代码

父组件html

<div class="ui-lg-3 ui-md-6 ui-g-12" *ngFor="let Obj of fruitList;let i=index;">
    <card-view-mini  [fruit]="Obj" (selectedFruit)="selectedFruit($event)"></card-view-mini>
</div>

子组件html "<div><mat-card> <span [ngClass]="{'selectedFruit':enableStyle}">{{fruit}}</span> <button (click)="changeStyle()"> </mat-card></div>"

changeStyle（）changeStyle(){ this.enableStyle=true; }

Answer 1

我想你有水果的ID。 如果是这样，您可以执行以下操作：

<span [ngClass]="{'selectedCSSClass':fruit.id == selected}">{{fruit}}</span>

<button (click)="selected=fruit.id">

第一行将检查所选内容是否与fruit.id相等 然后该按钮将使用当前的fruit.id设置所选对象。 您甚至不需要选择功能。