动态创建的类型复选框的输入未通过NgModel正确绑定值

Question

我有一个动态创建的表格，包装在表格中，当我单击同一行的“编辑”按钮时，该表格就会出现。 该动态表中有很多条件，当编辑该行时，它们显示一些输入。

这些输入的类型和绑定都是动态的。 让我们检查一下这个：

<td  *ngIf="table?.getInputType(column.key) && table?.isInputActive(column.key, rowIndex) && column.key != table?.buttonsColumn">
    <input *ngIf="table?.getInputType(column.key) != 'select' && column.key != table?.buttonsColumn"
        [type]="table?.getInputType(column.key)"
        [(ngModel)]="sortedValue.referenceObject[column.key]">

此绑定对于选择（不包含在此代码段中）和文本字段都是完美的。 但是它不能正确绑定复选框输入。 它并没有真正获得给定对象内的实际值，因此该复选框始终为“ false”（尽管有时该值为“ true”）。 因此，勾选该框并保存结果不会产生任何变化。

您可以在NgModel中看到的引用已经完成； 我已经检查过了，并且正确放置了此键值对象中涉及的名称。 问题出在别的地方，但我不知道在哪里。

有什么帮助吗？

Answer 1

该案例在GitHub上的问题7329中进行了讨论，被认为是“框架的局限性”（此问题已结案）。 讨论中提到的一种解决方法是使用条件指令。 有关演示，请参见此堆叠闪电战 。

<ng-container [ngSwitch]="inputType">
  <input *ngSwitchCase="'checkbox'" type="checkbox" [(ngModel)]="value">
  <input *ngSwitchCase="'password'" type="password" [(ngModel)]="value">
  <input *ngSwitchCase="'email'" type="email" [(ngModel)]="value">
  <input *ngSwitchDefault type="text" [(ngModel)]="value">
</ng-container>

要么

<input *ngIf="inputType === 'checkbox'" type="checkbox" [(ngModel)]="value">
<input *ngIf="inputType !== 'checkbox'" type="text" [(ngModel)]="value">

Answer 2

您可以尝试为每个复选框指定一个“ id”。 在以下示例中，我已使用rowIndex作为id。 您可以使用它，也可以提供其他一些唯一值作为id。

<td  *ngIf="table?.getInputType(column.key) && table?.isInputActive(column.key, rowIndex) && column.key != table?.buttonsColumn">
   <input *ngIf="table?.getInputType(column.key) != 'select' && column.key != table?.buttonsColumn" 
                     [id]="rowIndex" [type]="table?.getInputType(column.key)"
                            [(ngModel)]="sortedValue.referenceObject[column.key]">