Question

我试图将复选框的值绑定到对象中的布尔变量。该复选框用于内部一张桌子。我想要实现的功能是，当我单击复选框时，它应该切换对象中的布尔变量，其结果将显示在html上。

我使用以下代码实现相同目的：

HTML：

<tr *ngFor="let item of getListOfItems(); let i = index">
  <td>{{ i+1 }}</td>
  <td>{{ item.action }}</td>
  <td><input name="chk" type="checkbox" [(ngModel)]="item.isComplete" /></td>
  <td [ngSwitch]="item.isComplete">
    <span *ngSwitchCase="true">Yes</span>
    <span *ngSwitchDefault>No</span>
  </td>
</tr>

组件：

getListOfItems() {
  var items = [
    new TodoItem('Buy Flowers', false),
    new TodoItem('Get Shoes', false),
    new TodoItem('Collect Tickets', true),
    new TodoItem('Call Joe', false),
  ];

  return items; 
}

TodoItem Class

export class TodoItem {
    action: string;
    isComplete: boolean;

    constructor(action: string, isComplete) {
        this.action = action;
        this.isComplete = isComplete;
    }
}

然而，当我运行应用程序时，浏览器会继续加载页面并在一段时间后冻结。当我评论这个复选框时，一切都恢复正常，代码工作正常。无法找到解决方案。任何帮助将不胜感激。

Answer 1

已经有一段时间了，所以我可能会生锈，但下面应该有效。

  <td><input  type="checkbox"  [checked]="item.isComplete" (change)="item.isComplete= !item.isComplete"  /></td>

确保您已isComplete TodoItem中boolean明确标记为getListOfItems() { var items = [ new TodoItem('Buy Flowers', false), new TodoItem('Get Shoes', false), new TodoItem('Collect Tickets', true), new TodoItem('Call Joe', false), ]; return items; }

编辑：它只是单向绑定，它不适合您的用例。来到你的原始代码。

实际问题是，

<tr *ngFor="let item of getListOfItems(); let i = index">

每次通话 items = [ new TodoItem('Buy Flowers', false), new TodoItem('Get Shoes', false), new TodoItem('Collect Tickets', true), new TodoItem('Call Joe', false), ]; getListOfItems() { return this.items; }的正在调用该方法，它将返回包含相同项的新数组。结果是一个永无止境的循环。避免这种情况的最好方法是在此方法之外初始化数组，并返回此方法中的实例，如下所示

<td><input name="chk" type="checkbox" [(ngModel)]="item.isComplete" /></td>

我确信这只是用于测试，您最终将从服务类中的服务器获取数据。目前，这将解决问题你原来的绑定工作

{{1}}

注意：如果您使用表单组，最好为每个复选框指定不同的名称

Answer 2

问题是由getListOfItems()为每次调用返回一个新数组实例引起的。

而是将方法的值赋给属性：

  items: Array<TodoItem>

  ngOnInit(): void {
    this.getListOfItems();
  }

  getListOfItems() {
    var items = [
      new TodoItem('Buy Flowers', false),
      new TodoItem('Get Shoes', false),
      new TodoItem('Collect Tickets', true),
      new TodoItem('Call Joe', false),
    ];

    this.items = items; 
  }

StackBlitz

将复选框的选中值绑定到角度对象的布尔属性

2 个答案: