我如何以角度控制单个HTML项目

Question

我正在尝试为用户列表显示启用/禁用按钮的列表。每个用户应具有适当的按钮，即如果禁用了用户，则应显示启用按钮，反之亦然。我在打字稿文件中有标志" userenableflag"one_answers" userDisableFlag"，以控制每个用户要显示哪个按钮。

标志一次控制所有按钮，而不是单独控制每个按钮。因此，如果将UserEnableFlag设置为true某个地方，然后将false设置为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

您需要删除该视图，并检查每个记录的状态

例如，假设您在每个item

上都有一个名为isEnabled的属性

<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;
}