Как я могу контролировать отдельные элементы HTML в Angular?

Question

Я пытаюсь показать список кнопок включения / выключения для списка пользователей. У каждого пользователя должна быть соответствующая кнопка, т. Е. Если пользователь отключен, должна отображаться кнопка включения, и наоборот. У меня есть флаги «userEnableFlag» и «userDisableFlag» в файле TypeScript, чтобы контролировать, какая кнопка должна отображаться для каждого пользователя.

Флаги управляют всеми кнопками одновременно, а не управляют каждой кнопкой по отдельности. Поэтому, если для userEnableFlag где-то установлено значение TRUE, а для параметра N установлено значение FALSE, для каждого экземпляра на веб-странице будет отображаться только кнопка отключения.

<clr-dg-action-overflow>
        <button class="action-item" *ngIf="userEnableFlag" (click)="enableSingle(item)">Enable</button>
        <button class="action-item" *ngIf="userDisableFlag" (click)="disableSingle(item)">Disable</button>
</clr-dg-action-overflow>

Вот фрагмент из TypeScript

this.setupUserStreaming().subscribe((results: Array<UsersResponse>) => {
      // console.log(results);
      if (user.enabled) {
              this.userDisableFlag = true;
              this.userEnableFlag = false;
            } else {
              this.userDisableFlag = false;
              this.userEnableFlag = true;
            }
     });
}

Я ожидаю, что каждая кнопка будет отображаться индивидуально на основе значения флага для каждого экземпляра в отдельности.

Answer 1

вам нужно удалить эти переменные и проверить состояние каждой записи

, например, если у вас есть свойство с именем isEnabled для каждого item

<div *ngFor="let item of users">

  <clr-dg-action-overflow>
        <button class="action-item" *ngIf="item.isEnabled === false" (click)="enableSingle(item)">Enable</button>
        <button class="action-item" *ngIf="item.isEnabled === false" (click)="disableSingle(item)">Disable</button>
  </clr-dg-action-overflow>

</div>

и в вашемкод

enableSingle(item) {
  item.isEnabled = true;
}

disableSingle(item) {
  item.isEnabled = false;
}

Answer 2

Вы можете добавить другое поле для каждого пользователя в вашем списке, например isEnabled.

Таким образом, каждый раз, когда вы хотите включить / отключить пользователя, вы просто передаете пользователя в свой методи измените его свойство.

Вот идея, переведенная в код:

const users = [
    { id: 1, /* ... */ isEnabled: false },
    { id: 2, /* ... */ isEnabled: false },
    { id: 3, /* ... */ isEnabled: false },
];

enableSingle (user) {
    user.isEnabled = true;

    /* ... */
}

disableSingle (user) {
    user.isEnabled = false;

    /* ... */
}

<div *ngFor="let user of users">
    <!-- ... -->
    <clr-dg-action-overflow>
        <button class="action-item" *ngIf="!user.isEnabled" (click)="enableSingle(user)">Enable</button>
        <button class="action-item" *ngIf="user.isEnabled" (click)="disableSingle(user)">Disable</button>
    </clr-dg-action-overflow>
</div>