如何从选择之外操作 mat-select 多个?

Question

我有一个包含对应列表的垫子选择，并且我单击该计数器时，我将其添加到列表中，以便将其显示在mat-select下。

<mat-form-field style="width: 100%;">
<mat-select placeholder="Contrats" formControlName="contrat" multiple>
<mat-option *ngFor="let contrat of contrats$ | async" [value]="contrat.code" (click)="addContrat(contrat.code,contrat.label)">
{{ contrat.label }}
</mat-option>
</mat-select>
</mat-form-field>

这是允许我添加 contrat

的功能

public list: any[] = [];
addContrat(code: string, label: string) {
this.list.push({ code, label });
}
removeContract(i: number) {
this.list.splice(i, 1);
}

这是时间：

<mat-chip-list [multiple]="true">
<mat-chip style="width:100%" *ngFor="let x of list; let i=index" >
{{x.code}} -- {{x.label}}
<mat-icon matChipRemove aria-label="" (click)="removeContract(i)">clear</mat-icon>
</mat-chip>
</mat-chip-list>

所以我希望当我点击删除反对时，垫子选择将被更新

Answer 1

我认为您可能需要像这样用"可移动"属性装饰您的芯片

<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)">
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>

https://stackblitz.com/angular/ebkrnrqbnne?file=app%2Fchips-input-example.html https://material.angular.io/components/chips/overview#chip-input

否则，我认为如果一个简单的解决方案可以接受，您可以将点击事件移动到芯片而不是图标上。

<mat-chip style="width:100%" *ngFor="let x of list; let i=index" (click)="removeContract(i)">