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

Change card content style on clicking button on card

在我的组件中,我通过*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; }

我假设您有水果的 ID。 如果是这样,您可以这样做:

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

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

第一行将检查 selected 是否等于 fruit.id 并且该按钮会将 select 设置为当前 fruit.id。 你甚至不需要 select 函数。