javascript - 角。为什么复选框的行为很奇怪？

Question

这是codesandbox上此代码的示例

最好是现场观看。基本上会发生什么是你点击一个复选框，另一个被勾选。我检查了它已更改的数据，它已正确显示。[checked] 绑定应该是假的，但它是真的。

这里可能发生了特定于角度的事情，我看不出我做错了什么，但显然有些事情。

在这里复制代码：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <div *ngFor="let value of getDays(); let i = index">
    <input
      type="checkbox"
      [checked]="value === 1"
      (change)="setDay($event, i + 1)"
      [id]="'day' + i"
    />
    <label [for]="'day' + i">
      day {{i + 1}}
    </label>
  </div>
</div>

和 app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  days = {
    day_1: 0,
    day_2: 0,
    day_3: 0,
    day_4: 0,
    day_5: 0,
    day_6: 0,
    day_7: 0
  };

  getDays() {
    return Object.values(this.days);
  }

  setDay(event, index) {
    const newDays = { ...this.days };
    newDays["day_" + index] = Number(event.target.checked);
    this.days = newDays;
    console.log(this.days, "days");
  }
}

Answer 1

您可以创建一个变量并存储对象的值：

打字稿：

daysArray = Object.values(this.days);

HTML：

<div *ngFor="let value of daysArray; let i = index">
    <input
      type="checkbox"
      [checked]="value===1"
      (change)="setDay($event, i + 1)"
      [id]="'day' + i"
    />
    <label [for]="'day' + i">
      day {{i + 1}}
    </label>
    <p>value is {{ value }}</p>
  </div>

Answer 2

这就是我决定去的方式：

export class AppComponent {
  title = "CodeSandbox";
  days = {
    day_1: 0,
    day_2: 0,
    day_3: 0,
    day_4: 0,
    day_5: 0,
    day_6: 0,
    day_7: 0
  };

  daysArr = [];

  ngOnInit() {
    this.daysArr = this.getDays().map(item => ({
      checked: item
    }));
  }

  getDays() {
    return Object.values(this.days);
  }

  setDay(event, index) {
    this.daysArr[index].checked = Number(event.target.checked);
  }
}

HTML 文件：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <div *ngFor="let item of daysArr; let i = index">
    <input
      type="checkbox"
      [checked]="item.checked === 1"
      (change)="setDay($event, i)"
      [id]="'day' + i"
    />
    <label [for]="'day' + i">
      day {{i + 1}}
    </label>
  </div>
</div>

我只是要从初始对象创建一个对象数组并更新它。