Question

这是codesandbox上的这段代码示例

最好直播一下。基本上，发生的事情是您单击一个复选框，然后将另一个复选框打勾。我检查了更改的数据，正确显示了该数据。 [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>

和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

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

TypeScript：

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>

我只是要从初始对象中创建一个对象数组并对其进行更新。

有角度的。为什么复选框的行为很奇怪？

2 个答案: