angular - 单击卡片上的按钮更改卡片内容样式

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(){ this.enableStyle=true; }

标签： angularangular-materialangular6ngformat-card

Answer 1

我假设你有你的水果的身份证。如果是这样，您可以执行以下操作：

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

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

第一行将检查所选内容是否与fruit.id 相等，并且按钮将使用当前fruit.id 设置所选内容。你甚至不需要选择功能。