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

尝试使用红色按钮

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

Answer 2

isClicked property should be part of data object. dynamic classes can be added to the DOM using ngClass attribute.

.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 3

您应该将其声明为对象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 4

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

并在模板中声明一个变量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>

单击按钮后如何将按钮颜色更改为红色（原色为红色）？

4 个答案: