在ngular 6上為* ngFor中的輸入類型復選框啟用雙向數據綁定

Question

問題：* ngFor指令中復選框的雙向數據綁定

我有一個模板驅動的表單，其中使用* ngFor循環幾個單選按鈕。 基於一個鍵，在頁面加載時處於禁用狀態的單選按鈕旁邊會顯示復選框。 如果用戶單擊單選按鈕，並且具有相應的復選框，則啟用其狀態。 然后，我可以單擊復選框。

但是，我希望能夠禁用上一個復選框並在用戶單擊另一個單選按鈕時重置其值，從而傳遞正確的表單值。 （我將它們顯示為beloe代碼演示url中的json）

演示代碼示例： https : //stackblitz.com/edit/angular-ba8pfz

如果您看到了演示代碼，並且在“ Marvel Heroes”和“ Dc Heroes”之間切換，則應該能夠重置該復選框

感謝您的時間和建議。

Answer 1

您不能簡單地將checked屬性設置為false，因為將內容checked屬性設置為空字符串-等同於true或checked。 因此，復選標記消失了，但是控件的布爾狀態沒有改變。 必須更改控件的布爾狀態。 一種簡單的方法是在控件上生成單擊或更改事件。

嘗試這個：

enableRecursive(event, recursiveChk: boolean) {
    let clickEvent = new MouseEvent('click');
    this.recursiveChk.map((elem) => {
      if (elem.nativeElement.checked) {
        elem.nativeElement.dispatchEvent(clickEvent);
      }
      elem.nativeElement.disabled = true;
      if (`recursive_${event.target.id}` === elem.nativeElement.id) {
        elem.nativeElement.disabled = false;
      }

    });

  }