0

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

4

1 回答 1

0

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

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

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

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

于 2018-08-09T10:51:44.603 回答