单击卡片上的按钮更改卡片内容样式
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 函数。
在我的组件中，我通过*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 函数。