動態創建的類型復選框的輸入未通過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]">