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

.myClass{
颜色：红色；
}

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>

.myClass{
颜色：红色！重要；
}
{{data.name}
{{data.id}
去掉你的圆圈

不应将字段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>

{{data.name}
{{data.id}
去掉你的圆圈

您需要将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>

{{data.name}
{{data.id}
测试

---

试试这个红色按钮

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

或

行中有多少个按钮？实际上我是从Api中获取数据的，我调用了表中Api的前两列，下一列有maticon按钮，我通常在没有Api的情况下调用，现在这些列也将根据Api打印，这意味着有多少行（我指Api中有多少数据）这些铰孔柱也是这样打印的。在API中，我有25行数据，您必须对所使用的类更加具体，或者使用一个指令（但您必须在该指令中定义样式，而不是在css文件中定义样式）否我无法将数据添加到isclicked，因为数据来自我正常提供的API和按钮。是否希望所有数据项或特定行的单击状态？。对于每一行，您需要使用forEach循环将isClicked属性添加到API数据响应中。我希望单击行中单个按钮的状态，但即使我单击行中的一个按钮，它也会更改行中所有按钮的颜色感谢@suresh我根据您的回答有了一些想法，并且工作正常。