Angular2-在两个[(ngmodel)]结合之间共享布尔参考

Question

我正在研究一种形式创建者的wysiwyg类型。我正在尝试通过选择要在其他组件中从对象编辑和列出键的行来编辑行。

。

组件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"，Dynamic Input类型Checkbox不起作用

我找到了解决方案的方法：

<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]" />

工作演示