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表单上。

因此，我们有两个实现：

通常来说，您不会直接操作HTML元素-Angular会为您这样做。
保持视图和数据模型同步，不再需要手工编码。

该怎么办？

这里确实有一个选择。您需要一个对象以映射到是否选择作者：

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/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Answer 3

尝试使用过滤器功能

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

如何检索所有选中的复选框？

3 个答案: