我有一张桌子。我有一列只有复选框作为其中的值。我已经使用 for 循环将所有值放入表中。我所做的是当我启用一个复选框时，我显示了一条消息“嘿”当我启用一个复选框时（出现消息）但是当我启用另一个复选框时，消息消失了。当一个复选框被启用时，消息最初会出现。我需要的是，在所有复选框被禁用之前，消息应该在那里，即使有一个或多个复选框，消息也应该在那里。我正在用角度编写我的代码。
这是我的 stackblitz 链接 https://stackblitz.com/edit/angular-oswf2h?file=src%2Fapp%2Fapp.component.ts
【问题讨论】：
标签： javascript html angular typescript checkbox
您应该存储输入值并根据存储值提供结果。
以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>
更改堆栈闪电战：https://stackblitz.com/edit/angular-jwpane?file=src/app/app.component.html
【讨论】：
this.a.map(() => false); 移动到ngOnInit 或类似的东西
checkedValues)，它使用 false 进行初始化，并且长度与 a 相同。使用let i = index，您会收到迭代的当前索引，并将其传递给[(ngModel)] 值绑定。使用此绑定，值将存储在数组中。 getter isChecked 提供数组的“摘要”，它只告诉数组是否有任何真值。
b => b，其中b 是数组中的一个元素，所以它是一个布尔值。如果元素为真，我们想要返回真。在很长一段时间内你可以说b => b === true。显然，如果 b 为真，则该术语总是返回真，所以b => b
我稍微修改了你的代码以使其正常工作。可能有很多方法可以做到这一点，但我决定尝试尽可能少的更改。
存储每个单独复选框的检查状态。
a = [
{ name: "a", check: false },
{ name: "b", check: false },
{ name: "c", check: false }
];
在 checkBtn 按下从前端接收项目并检查所有项目以查看是否全部禁用
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>
【讨论】：
问题是你所有的复选框都连接到同一个布尔值，所以他们只是切换它。当一个被点击时，不管哪一个，ischeck 都会得到true 的值。当一个复选框被点击时，无论是同一个还是不同的，它都会再次切换，所以现在ischeck 是false。
一种可能的解决方案是对每个复选框进行不同的检查，并根据逻辑 OR 显示消息。
更新的 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)">
编辑： 更新了代码以模拟从服务获取数据 ts模拟：
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 };
});
}
【讨论】：