我知道我的帖子接近这个问题:Incorrect behaviour when selecting chips in Angular Material
但是我仍然有一些困难让它适用于我的案例。
我有一个类型的mat-chip-list选择,我在表单中用来在firebase中创建产品。在提交表单时,我不确定如何检索所选mat-chip的所有信息。
来自模板:
<form #newProductForm="ngForm" (ngSubmit)="onSubmit(newProductForm)"> <mat-form-field>
<input matInput placeholder="Title"
required ngModel #newTitle="ngModel" name="newTitle">
</mat-form-field>
<mat-chip-list ngModel #selectedTypes name="selectedTypes"
*ngIf="types | async; let types" [multiple]="true">
<mat-chip *ngFor="let types of types"
[selectable]="true"
[color]="primaryIfSelected"
[value]="type"
(click)="selectType(type)">
{{ type.title }}
</mat-chip>
</mat-chip-list>
<button mat-fab type="submit" color="accent">
<mat-icon>save</mat-icon>
</button>
来自product-component.ts
this.types = this.productService.getTypeList();
onSubmit(newProductForm: NgForm) {
console.log(newProductForm) // newTitle="blabla" but selectedTypes="" }