我正在使用 ngClass 在单击按钮时更改颜色和文本，并且使用数据表从远程服务器获取数据

Question

这里的问题是，当我单击激活或停用时，它会为所有条目激活，如何为唯一行调用该函数。

HTML 如下：

<button [ngClass]="{'btn-danger':user.active, 'btn-success':!user.active}"
          (click)="click()"> {{text}}
    </button>

TS 如下：

user = { active: true };
    text = "Deactive";

  click() {
    if (this.user.active) {
        this.user.active = false;
        this.text = "Active";
    } else {
        this.user.active = true;
        this.text = "Deactive";
    }
  }

Answer 1

您可以试试这个解决方案

使用 {{user.active ? 'Deactive':'Active'}} 作为显示值。

我已经在 Stackblitz

上创建了一个演示

Component.ts

users:Array<any>=[{
    id:1,
    name:'User 1',
    active:false
  },{
    id:2,
    name:'User 2',
    active:true
  },{
    id:3,
    name:'User 3',
    active:true
  },{
    id:4,
    name:'User 4',
    active:false
  }]

Component.html

<table>
    <tr *ngFor="let user of users">
        <td>{{user.name}}</td>
        <td>
            <button [ngClass]="{'btn btn-danger':user.active, 'btn btn-success':!user.active}" (click)="user.active = !user.active"> {{user.active ? 'Deactive':'Active'}}
    </button>
        </td>
    </tr>
</table>

我正在使用 ngClass 在单击按钮时更改颜色和文本，并且使用数据表从远程服务器获取数据

I am using ngClass to change color & text on a button click & Data is fetched from Remote Server using Data Tables

typescript

angular

angular6