Как сделать значение флажка истинным в реактивных формах с помощью angular8

Question

Я связал значения флажка динамически. Так что теперь, основываясь на проверке и снятии отметки, мне нужно передать тот же массив данных со значениями, как истина / ложь. Но теперь, даже если проверено значение, оно показывает только ложь и основано на проверке и снятии отметки, если я сниму отметку любой из флажков, выбор / отмена выбора все еще проверен.

ДЕМО: ДЕМО

ТС:

 checkAll(ev) {
    if (!this.all) {
      this.PrintList.forEach(x => x.value =  true)
      this.isAllChecked()
    } else {
      this.PrintList.forEach(x => x.value =  false)
      this.isAllChecked()
    }
  }

isAllChecked() {
    this.all = !this.all
}

onChange(event, item) {
 if(event){
    this.printLists.push(item);
    } else {
      this.printLists.splice(this.printLists.indexOf(item), 1)
    }
  }

Answer 1

Я изменил ваше Stackblitz Demo и решено и улучшено it. Вы должны использовать patchValue из formArray in change метода Select/Deselect all.

https://stackblitz.com/edit/angular-gt5kkc?embed=1&file=src / app / app.component. html

Answer 2

, если вы хотите сделать это без реактивной формы, это один из вариантов. Оставьте printLists, присвойте print.value в итерации, основанной на $event.target.checked. Вы можете использовать getter для флажка select all / deselect all, который мы также используем в функции checkAll. Исходя из этого, я предлагаю следующее:

в итерации:

<input type="checkbox" [checked]="print.value" (change)="print.value = $event.target.checked" ...>

флажок выбрать все / отменить выбор всех:

<input type="checkbox" [checked]="isAll" (change)="checkAll()">

Затем checkAll() функция и геттер isAll:

checkAll(ev) {
  // check if all are checked or not and act accordingly
  if (!this.isAll) {
    this.PrintList.forEach(x => (x.value = true));
  } else {
    this.PrintList.forEach(x => (x.value = false));
  }
}

get isAll() {
  // return true/false based on if all are checked or not
  return this.PrintList.every(x => x.value === true);
}

Ваш раздвоенный STACKBLITZ