Question

我正在尝试为用户列表显示启用/禁用按钮的列表。每个用户都应具有适当的按钮，即，如果某个用户被禁用，则应显示该按钮启用，反之亦然。我在TypeScript文件中有标志“ userEnableFlag”和“ userDisableFlag”，以控制为每个用户显示哪个按钮。

标志一次控制所有按钮，而不是分别控制每个按钮。因此，如果在某处将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。

因此，每次您要启用/禁用用户时，只需将用户传递给您的方法并修改其属性即可。

这里是将想法翻译成代码的地方：

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>

Answer 2

您需要删除该vialeables并检查每条记录的状态

例如，假设您在每个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;
}

如何在Angular中控制单个HTML项？

2 个答案: