Javascript 复选框禁用角度

我有一张桌子。我有一个列，其中只有复选框作为值。我已使用for循环将所有值放入一个表中。我所做的是，当我启用一个复选框时，我会显示一条消息“hey”，当我启用另一个复选框时，消息会消失。即使启用了一个复选框，消息最初也会出现。我需要的是，在所有复选框被禁用之前，消息应该在那里，即使有一个或多个复选框，消息也应该在那里。我正在用angular编写代码

这是我的stackblitz链接

---

您应该存储输入值，并根据存储值提供结果

带有

ngModel

的示例：

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

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

名称
复选框
{{b.name}
嘿

---

更改了stackblitz:

问题是您的所有复选框都连接到同一个布尔值，所以它们只是切换它。无论单击哪个选项，

ischeck

都会获取

true

的值。单击复选框时，无论是相同的复选框还是不同的复选框，都会再次切换，因此现在

ischeck

为

false

。 一种可能的解决方案是对每个复选框进行不同的检查，并根据逻辑

或
显示消息

看这里

更新的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)">

我对你的代码做了一点修改，让它正常工作。有很多方法可以做到这一点，但我决定尝试尽可能少的改变

存储每个单独复选框的检查状态

a = [
{ name: "a", check: false },
{ name: "b", check: false },
{ name: "c", check: false }
];

在检查BTN时，按从前端接收项目并检查所有项目，以查看是否所有项目都已禁用

checkBtn(b) {
    b.check = !b.check;
    let check = false;
    this.a.forEach(item => {
      if (item.check) {
        check = true;
      }
    });
    this.ischeck = check;
  }

最后从前端传递项目

            <tr *ngFor="let b of a;">
                <td>{{b.name}}</td>
                <td> <input type=" checkbox" id="vehicle1" name="vehicle1"  (click)=" checkBtn(b)">
                </td>
            </tr>


{{b.name}
我正在从服务获取数据。所以我不能将校验值添加为false。。还有别的办法吗？@Einars BistrovsI正在从服务获取数据。所以我不能将校验值添加为false。。还有别的办法吗@PMO1948@JoeRishwanth是的，你可以绘制地图。当您从服务获取数据时，将其映射为：data.map（d=>{return{…d，isChecked:false}}）在我的代码中我将在哪里使用“data.map（d=>{return{…d，isChecked:false}）”代码？在您的服务回调中。如果它是可观察的，请使用service.method（）.pipe（映射（…）。如果不是，那么如果您有a=service.method（），您可以执行a=service.method（）.map（…）我可以在stackblitz中发布我的服务并在此处更新吗？属性a在初始化之前使用。我得到了这个错误。注意：我从一个服务中得到了列表，那么你可能需要移动
this.a.map（（）=>false）进入
ngOnInit
或类似的东西。它们起作用了，谢谢。你能给我解释一下密码吗？我理解代码有点困难？您的组件中有一个布尔值数组（
checkedValues
），它用
false
初始化，长度与
a
相同。使用
let i=index
接收迭代的当前索引，并将其传递给
[（ngModel）]
值绑定。通过此绑定，值存储在数组中。getter
isChecked
提供数组的“摘要”，它只告诉数组是否有任何真值。some是数组上的一个函数，用于检查数组中的任何元素是否满足提供的谓词。谓词函数是
b=>b
，其中
b
是数组中的一个元素，因此它是一个布尔值。如果元素为true，我们希望返回true。在很大程度上，你可以说
b=>b===true
。显然，如果b为真，该项总是返回真，因此
b=>b
checkBtn(b) {
    b.check = !b.check;
    let check = false;
    this.a.forEach(item => {
      if (item.check) {
        check = true;
      }
    });
    this.ischeck = check;
  }

            <tr *ngFor="let b of a;">
                <td>{{b.name}}</td>
                <td> <input type=" checkbox" id="vehicle1" name="vehicle1"  (click)=" checkBtn(b)">
                </td>
            </tr>