javascript - 动态创建的复选框类型输入无法通过 NgModel 正确绑定(bind)值

Question

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

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

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

此绑定(bind)非常适合选择(不包含在此代码段中)和文本字段。但它不能正确绑定(bind)复选框输入。它并没有真正获得给定对象内的实际值，因此该复选框始终为“false”(尽管该值有时为“true”)。因此，勾选该框并保存结果不会产生任何更改。

您可以在 NgModel 内部看到的引用已经完美完成；我已经检查过了，这个键值对象中涉及的名称是正确的。问题出在其他地方，但我不知道出在哪里。

有什么帮助吗？

Answer 1

此案例在 the issue 7329 中讨论在 GitHub 上，被认为是“框架的限制”(问题已关闭)。讨论中提到的一种解决方法是使用条件指令。请参阅this stackblitz进行演示。

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