使用Angular2将所有复选框更改为真或假答案

【问题标题】：Change all checkbox a true or false with Angular2使用Angular2将所有复选框更改为真或假
【发布时间】：2018-08-29 14:29:04
【问题描述】：

我正在尝试将所有复选框更改为真或假，使用 1 个复选框，在我的 html 中我得到了更改，但在 console.log();我得到默认值

我正在使用 Ngmodel，但我认为我失败了..

组件.TS

public checkall: boolean = false;
public closures: Array<item>;

HTML->

<div class="toggle-switch">
    <input type="checkbox" id="checkAll" name="checkAll" (change)="check()" [(ngModel)]="checkall">
 <label for="checkAll"></label>
</div>

<tr *ngFor="let closure of closures">

<input type="checkbox" id="{{closure.id}}"  (change) = "check()" name = "{{closure.id}}"[(ngModel)] = "closure.checkclosure"[checked] = "checkall" >
<label for="{{closure.id}}"></label>



check() {
    console.log(this.closures);
}

output -> false 但在我的 html 中，我的复选框为 true。

【问题讨论】：

闭包中有什么？
是的，抱歉，我更新了我的问题。 clousures 是我来自服务器的数组，我将此数组与双数据绑定（“ngModel”）一起使用，因为我知道我的 console.log 中的复选框是正确的
问题是我在我的 type="checkbox" id="checkAll" name="checkAll" 中更改，我的 html 更改为 true 但在我的 console.log() 中不是，如果我更改1 通常复选框，我是的 console.log();

标签： angular

【解决方案1】：

这行得通：

.ts:

  closures = [
    { "id": 1, "checkclosure": false },
    { "id": 2, "checkclosure": false },
    { "id": 3, "checkclosure": false },
    { "id": 4, "checkclosure": false },
    { "id": 5, "checkclosure": false }
  ]

  public checkall: boolean = false;

  check() {
    console.log(this.closures);
  }

  checkAllFunc() {
    this.closures.forEach(elem => {
      elem.checkclosure = this.checkall
    })
  }

.html:

<div class="toggle-switch">
  <input
    type="checkbox"
    id="checkAll"
    name="checkAll"
    (change)="checkAllFunc()"
    [(ngModel)]="checkall">
   <label for="checkAll"></label>
</div>

<hr/>

<div *ngFor="let closure of closures">
  <input
    type="checkbox"
    id="{{closure.id}}"
    (change)="check()"
    name="{{closure.id}}"
    [(ngModel)]="closure.checkclosure">
  <label for="{{closure.id}}"></label>
  {{closure.checkclosure}}
</div>

Check Demo here

【讨论】：

是的，工作，但使用 forEach，而不是 map（map 用于返回已更改的数组）
@Eliseo 我同意。更新了我的答案。谢谢。

【解决方案2】：

您可以使用以下代码修复它

TS

checkall: boolean = false;
  closures =  [{ "id":1,"checkclosure":false},{ "id":2,"checkclosure":false},{ "id":3,"checkclosure":false},{ "id":4,"checkclosure":false},{ "id":5,"checkclosure":false}]

  check() {
    for(var i in this.closures){ //loop through to update your value of checkbox
      this.closures[i].checkclosure = this.checkall
    }
    console.log(this.closures);
  }

HTML

<div class="toggle-switch">
    <input type="checkbox" id="checkAll" name="checkAll" (change)="checkAll()" [(ngModel)]="checkall">
 <label for="checkAll"></label>
</div>

<tr *ngFor="let closure of closures">

<input type="checkbox" id="{{closure.id}}"  name = "{{closure.id}}"[(ngModel)] = "closure.checkclosure">
<label for="{{closure.id}}"></label>

【讨论】：

问题是，如果我的常规检查为假，我会点击 1 个复选框，使用您的代码，我的复选框始终为假，因为我的常规检查为假。
例如：在 ts singleCheck(){ console.log(this.closures); }
和 HTML
for (... in ...) 语句必须用 if 语句 (forin) 过滤
不，我在 visualCode for(var i in this.closures){ 中遇到错误

【解决方案3】：

您的checkall 值仅从组件流向模板，并且不会仅仅因为它们恰好位于同一元素上而绑定到closure.checkclosure 的值。 IE。 closure.checkclosure 不会得到更新，除非您通过单击元素 / 以编程方式对其进行更新。

我会选择：

check(event) {
  this.closures = this.closures.map(closure => {
    return {...closure, checkclosure: this.checkall};
  });
}

我会像这样更改模板：

<div *ngFor="let closure of closures">
  <input type="checkbox" id="{{closure.id}}" name="{{closure.id}}" [(ngModel)]="closure.checkclosure">
  <label for="{{closure.id}}"></label>
</div>

【讨论】：

对不起，我修正了代码。请立即尝试一下。
klemen .....现在我的常规复选框实际上是其他复选框，但如果我实际上只想要 1 个复选框是不可能的。