javascript - 在 angular 中禁用复选框

我有一张表。我有一列，其值仅包含复选框。我通过 for 循环将所有值带入表中。我所做的是，当我启用一个复选框时，会显示一条消息“hey”。当我启用一个复选框时（消息出现），但是当我启用另一个复选框时，消息就消失了。消息最初会在至少启用一个复选框时出现。我需要的是，直到所有复选框都被禁用之前，消息都应存在，并且即使有一个或多个复选框被选中，消息也应存在。我在 Angular 中编写我的代码。

这是我的 Stackblitz 链接 https://stackblitz.com/edit/angular-oswf2h?file=src%2Fapp%2Fapp.component.ts

答案＃1

问题是你所有的复选框都连接到同一个布尔值，所以它们只是切换它。当其中一个被点击时，无论是哪一个，ischeck 都会变为 true。当复选框被点击，不管是同一个还是不同的，它会再次切换，所以现在 ischeck 变为 false。一种可能的解决方案是为每个复选框设置一个不同的检查，并根据逻辑 OR 来显示消息。

在这里查看这个 Stackblitz 解决方案

更新的 ts 文件：

  ischeck: boolean = false;
  a = [
    { name: "a", isCheck: false },
    { name: "b", isCheck: false },
    { name: "c", isCheck: false }
  ];

  checkBtn(b: { name: string; isCheck: boolean }) {
    b.isCheck = !b.isCheck;
    this.ischeck = this.a.some(c => c.isCheck); // at least one item has checked as
  }

以及在 HTML 中的更改：

<input type=" checkbox" id="vehicle1" name="vehicle1"  (click)=" checkBtn(b)">

编辑：更新了代码以模拟从服务获取数据的 TypeScript 模拟：

  a = [];

  ngOnInit() {
    this.a = [{ name: "a" }, { name: "b" }, { name: "c" }]; //returned from service
    this.a.map(v => { //data changes to add boolean
      return { ...v, isCheck: false };
    });
  }

答案＃2

你应该存储输入值，并根据存储的值提供结果。

含有 ngModel 的示例：

checkedValues: boolean[] = this.a.map(() => false);

  get isChecked() {
    return this.checkedValues.some(b => b);
  }

<div>
    <div class="Container" style="margin-left: 10px;">
        <div class="table-responsive">
            <table class="table">
                <thead class="table_header">
                    <tr>
                        <th>Name</th>
                        <th>Checkbox</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let b of a; let i = index">
                        <td>{{b.name}}</td>
                        <td> <input type="checkbox" id="vehicle1" name="vehicle1" [(ngModel)]="checkedValues[i]">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div *ngIf="isChecked">
        <h1>Hey</h1>
    </div>
</div>

已更改 stackblitz: https://stackblitz.com/edit/angular-jwpane?file=src/app/app.component.html