Включить двустороннюю привязку данных в Angular 6 для флажка типа ввода внутри * ngFor

Question

Проблема: двусторонняя привязка данных для флажка в * ngFor директиве

У меня есть шаблонно-управляемая форма, в которой я использую * ngFor, чтобы зациклить несколько переключателей. Основываясь на одной клавише, я показываю флажок рядом с переключателями в отключенном состоянии при загрузке страницы. Если пользователь нажимает переключатель и если у него есть соответствующий флажок, я включаю его состояние. Затем я могу нажать на флажок.

Однако я хочу иметь возможность отключить предыдущий флажок и сбросить его значение, когда пользователь нажимает на другую кнопку-переключатель и, таким образом, передает правильные значения формы. (Я показываю их как JSON в демонстрационном URL кода Белого)

Пример демонстрационного кода: https://stackblitz.com/edit/angular-ba8pfz

Если вы видите демонстрационный код, я смогу сбросить флажок, если переключаюсь между "Marvel Heroes" и "Dc Heroes"

Цените ваше время и предложения.

Answer 1

Вы не можете просто установить для атрибута checked значение false, поскольку для атрибута содержимого checked задается пустая строка, которая является эквивалентом true или проверено. Следовательно, флажок исчезает, но логическое состояние элемента управления не изменяется. Приходится менять логическое состояние элемента управления. Один простой способ сделать это - создать событие click или change для элемента управления.

Попробуйте это:

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;
      }

    });

  }