Javascript 有棱角的为什么复选框行为怪异？

下面是一个关于此代码的示例

最好是现场直播。基本上，你点击一个复选框，另一个复选框被勾掉。我检查了数据，数据已经更改，显示正确。[checked]绑定应为false，但为true

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

在此处复制代码：

<!--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>

---

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

打字稿：

daysArray = Object.values(this.days);

HTML:

第{{i+1}天
值为{value}}

我就是这样决定的：

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>

欢迎来到{{title}}！
第{{i+1}天

---

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

这似乎是由一个off by one错误引起的，

day_1

是对象中的第一个元素，但是

ngFor

循环中的

index

属性从0开始。@ExplosionPills，是的。他们从第一天开始。这就是我需要它的原因。别介意。但是，当我处理（变化）时，我确实在索引中添加了一个。这看起来非常复杂。。有没有理由这样做，而不是仅仅使用一些反应式表单控件？或者作为另一种选择——为什么不简单地使用一个实际的天数数组并循环这些天数呢？或者使用keyvalue管道在days对象中循环。因为您使用的是原语，所以很可能是更改检测工作不正常-这可能解释了您的问题？@MikeOne，是的，确实如此。API，我想这就是原因。但即便如此，这似乎是一种奇怪的处理方式，但为什么它能以这种方式工作还是让我很难受。@MikeOne，好吧，我想变化检测就是原因。我现在更改了代码，还没有测试过。但我想赛迪在这里不起作用。我是说如果你能改变日期，那么也许是的。但我最初的目的是跟踪原始对象并对其进行更改。但我想现在我必须重新格式化数据。我仍然不明白为什么初始代码不起作用，调用一个方法来获取角度数组会导致这个错误吗？或者什么。@JavidAskerov，我已经测试过了，它是有效的。我不知道确切的原因，但我相信这与检测策略有关。因为当您在模板中使用方法时，Angular应该在每个更改检测周期和更新中计算表达式。如果这对您有效-酷！但请注意，这可以更容易、更干净地解决。我现在正在打电话，所以现在不能提供一个例子。不幸的是，@MikeOne只要你能，如果你不会忘记，我将感谢你的回答

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);
  }
}

<!--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>