单击按钮后如何将按钮颜色更改为红色(主要颜色为红色)?

Question

.myClass{
color : red;
}

单击按钮后，我需要将按钮颜色更改为红色(主要颜色为红色(，但它是更改一行中所有按钮的颜色，但我只需要选择按钮即可更改颜色。

<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="isClicked = !isClicked"  [class.myClass]="isClicked">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>

Answer 1

isClicked 属性应该是数据对象的一部分。 可以使用 ngClass 属性将动态类添加到 DOM 中。

.myClass{
color : red !important;
}
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="data.isClicked = !data.isClicked"  [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>

Answer 2

而不是声明字段isClicked为布尔类型，你应该将其声明为对象isClicked = {}。这应该根据 data.id 为每一行设置

。

<tr *ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="isClicked[data.id] = !isClicked[data.id]"  [class.myClass]="isClicked[data.id]">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
</tr>

Answer 3

您需要将isClicked设置为组件类中的数组： 是单击的： 数组= [];

并在模板中声明一个变量 i

<tr *ngFor="let data of database, let i = index ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="isClicked[i] = !isClicked[i]" 
[class.myClass]="isClicked[i]">test
</button>
</td>

Answer 4

试试你的红色按钮，

<button class="btn btn-danger"></button> or
<button class="btn btn-outline-danger"></button>