Я использую 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>