Question

我正在研究一种所见即所得的形式创作者。我正在尝试通过选择要编辑的行来编辑行，并在另一个组件中列出对象中的键。

组件A.ts

onedit() {
  this.service.emit(this.rowConfig)
}

组件B.ts

ngOnInit() {
  this.service.subscribe({
    next: config => {
      this.data = config
      this.props = Object
          .keys(config)
          .reduce(/* convert to { key, inputType } */)
  })
}

组件B.html

<div *ngFor="let prop of props">
  <label>{{prop.key}}</label>
  <input [type]="prop.inputType" [(ngModel)]="data[prop.key]" />
</div>

这适用于我尝试过的几种输入类型（文本，数字），但它不适用于“复选框”。我甚至在道具实体中添加了ID，并将id和name属性添加到<input [type]="prop.inputType" [id]="prop.ID" [name]="prop.ID" [(ngModel)]="data[prop.key]" />

布尔值的引用是否在某处丢失？当共享对象的引用时，为什么双向绑定不能用于复选框（它适用于字符串和数字）？

Answer 1

此处只有[type]="prop.inputType"问题，动态输入类型的复选框无法正常工作

我找到了解决方法：

<input *ngIf='prop.inputType !== "checkbox"' [type]="prop.inputType" [name]='prop.name' [(ngModel)]="data[prop.key]" />

<input *ngIf='prop.inputType === "checkbox"' type='checkbox' [name]='prop.name' [(ngModel)]="data[prop.key]" />

<强> WORKING DEMO

Angular2 - 在两个[（ngModel）]绑定

1 个答案: