Как восстановить все отмеченные флажки?

Question

Я определил некоторые флажки с компонентом Angular Material Checkbox: https://material.angular.io/components/checkbox/examples

<div>
  <mat-checkbox formControlName="authors" class="authors-checkboxes" *ngFor="let author of authors" [value]=author.id>{{ author.name }}</mat-checkbox>
</div>

И FormGroup

this.form = new FormGroup({
  id: new FormControl(article.id),
  timestamp: new FormControl(article.timestamp),
  title: new FormControl(article.title),
  chapo: new FormControl(article.chapo),
  body: new FormControl(article.body),
  bodyStyle: new FormControl(article.bodyStyle),
  author: new FormControl(article.author),
  authors: new FormControl(article.authors),
  authors2: new FormControl(article.authors2),
  date: new FormControl(article.date),
  readingTime: new FormControl(article.readingTime),
  pictures: new FormControl(),
  status: new FormControl(),
  mainPicture: new FormControl(article.mainPicture),
  mainPictureFile: new FormControl(article.mainPictureFile),
  position: new FormControl(article.position)
});

Какой лучший способ получить все отмеченные флажки?Я хочу собрать всех выбранных авторов.

Я собирался сделать это с document.getElementsByClassName и forEach , но у меня сложилось впечатление, что это не очень хороший подход.

const authorsCheckboxes = document.getElementsByClassName("authors-checkboxes");
console.log(authorsCheckboxes);
Array.prototype.forEach.call(authorsCheckboxes, function(authorCheckbox) {
  console.log(authorCheckbox);
  console.log(authorCheckbox.value);
});

Answer 1

Опция 1

Добавьте свойство isSelected в класс автора и используйте двустороннюю привязку к флажку.Затем вы можете фильтровать список авторов по выбранному статусу.

<mat-checkbox *ngFor="let author of authors" [(ngModel)]="author.isSelected"></mat-checkbox>

Демонстрация Stackblitz: https://stackblitz.com/angular/mxvrpgjvnba

authors.filter(a=>a.isSelected);

Опция 2

Используйте событие change флажка, чтобы отслеживать выбранных авторов.Вы можете сохранить выбранных авторов в массиве и добавлять / удалять при изменении события.

change: EventEmitter<MatCheckboxChange>

Опция 3

В качестве альтернативы вы можете посмотретьв списках выбора:

https://material.angular.io/components/list/overview#selection-lists

Демонстрация, показывающая выбранные параметры:

https://stackblitz.com/angular/rmxjxxaoode?file=app%2Flist-selection-example.ts

Answer 2

Я думаю, что люди в целом борются с чем-то вроде этого, потому что они очень привыкли делать привязку данных старомодным, ручным способом.Чтобы добиться успеха в Angular, нужно забыть старые пути и принять новые.В противном случае вы получите страшную ошибку ExpressionChangedAfterItHasBeenCheckedError.

Angular обрабатывает привязку данных за вас.

Когда вы используете [(ngModel)], синтаксис содержит двустороннюю привязку данных.[] указывает на привязку ваших данных к элементу управления.() означает привязку элемента управления обратно к вашим данным.[(ngModel)] реализован для всех стандартных элементов управления HTML-формой.

Когда флажок установлен, выражение в ngModel запускается для установки свойства в классе модели.Это также работает в обратном порядке - когда вы изменяете свойство базового класса данных, оно отражается в форме HTML.

Таким образом, у нас есть две реализации:

1. Вообще говоря, вы не манипулируете элементами HTML напрямую - Angular делает это за вас.
2. Для синхронизации представления и модели данных больше не требуется ручная разводка кода.

Чтоделать?

Здесь действительно есть один вариант.Вам нужно иметь объект для сопоставления с тем, выбран ли автор:

authors = [ { author: {...}, isSelected: false} ];

Затем ваш ngFor будет использовать это в качестве входных данных:

<div>
  <mat-checkbox class="authors-checkboxes" *ngFor="let item of authors" [(ngModel)]="item.isSelected">{{ item.author.name }}</mat-checkbox>
</div>

Обратите внимание также , что Angular не поддерживает смешивание ngModel и FormGroup.Если вам нужно использовать FormGroup, вы должны продолжить в этом направлении, но вам все равно нужно будет создать промежуточный класс, который будет содержать информацию о том, выбран ли данный автор.См. Больше - https://blog.angular -university.io / введение в угловые 2 формы, управляемое шаблоном, по сравнению с моделью /

Answer 3

Попробуйте с помощью функции фильтра

//if value is a boolean if not use a comparation.
authorsCheckboxes.filter(x => x.value)