输入复选框元素的双向数据绑定

Question

// the options
public items = [{id: 1, main: true}, {id: 2, main: false}, {id: 3, main: false}];

// the selected option
public selectedItem = this.items[0];

<select id="itemOptions"
        name="itemOptions"
        [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [ngValue]="item">{{item.id}}</option>
</select>

<input id="mainItem" 
       name="mainItem" 
       type="checkbox"
       [(ngModel)]="selectedItem.main"
       (ngModelChange)="setMain()" >

setmain函数如下所示：

setMain() {
  for(let item of this.items){
    //set all items` main to false if they are not the selected item
    if(this.selectedItem.id != item.id){
      item.main = false;
    }
    //if it is the selected item, set it as the main item
    else if(this.selectedItem.id == item.id){
      item.main = true;
    }
  }
}

这里的重点是在任何时候都必须有一个主要项目。但是，当我选择主项并取消选中它时，函数工作得很好，main保持true，但是复选框仍然未选中。

我读了这篇文章和更多的文章，但没有找到一些看起来像我的案子的东西，也没有找到答案的线索。正如我对双向数据绑定的理解，当我单击复选框时，它将我的selecteditem.main的值更改为false。但随后调用setmain并将其设置为true。为什么复选框没有被选中？

Answer 1

解决你的情况

将setmain的所有代码放在settimeout中：

setMain() {
    setTimeout(() => {
        for(let item of this.items){
            //set all items` main to false if they are not the selected item
            if(this.selectedItem.id != item.id){
                item.main = false;
            }
            //if it is the selected item, set it as the main item
            else if(this.selectedItem.id == item.id){
                item.main = true;
            }
        }
    })
}

工作演示