我定义了一些带有角材料复选框组件的复选框: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);
});发布于 2019-03-04 16:47:11
选项1
向author类添加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事件进行添加/删除。
change: EventEmitter<MatCheckboxChange>
选项3
或者,您可以查看选择列表:
https://material.angular.io/components/list/overview#selection-lists
显示选定选项的演示:
https://stackblitz.com/angular/rmxjxxaoode?file=app%2Flist-selection-example.ts
https://stackoverflow.com/questions/54987429
复制相似问题