如何从 mat-select 中获取取消选择的值答案

【问题标题】：How to get the deselected value from mat-select如何从 mat-select 中获取取消选择的值
【发布时间】：2020-02-18 15:12:47
【问题描述】：

我有一个垫子桌，在桌子里面我有这个垫子选择：

<mat-select multiple placeholder="{{element.name}}" [(value)]="selectedCol" (selectionChange)="selectionChange($event)" [disabled]="!selection.isSelected(element.id)">
          <div *ngFor="let item of col">
            <div *ngIf="item.Id === element.id">
              <mat-option [value]="item.id"> 
                {{item.name}}
              </mat-option>
            </div>
          </div>
</mat-select>

我需要获取被取消选择的值，因此我可以将其从选定值列表中删除，因为我表中的每一行都保存在“selectionChange”上的一个变量中。

【问题讨论】：

您不能通过您的 (selectionChange)="selectionChange($event)" 执行此操作吗？
我不能，(selectionChange) 只返回选定的值，但我需要我取消选择的值。

标签： angular typescript angular-material

【解决方案1】：

在 HTML 端

(selectionChange)="selectionChange($event)"

在ts侧

selectionChange(event: MatSelectChange) {
      console.log(event.value)
}

其中值是对象列表（数组）

【讨论】：

【解决方案2】：

我需要获取被取消选择的值，以便将其从选定值的列表，因为我表中的每一行都保存在 “selectionChange”上的一个变量。

为什么？？ Angular 可以为您完成这项工作。使用 [(ngModel)] 或 FormControl

<mat-form-field>
  <mat-select placeholder="Toppings" [(ngModel)]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>
{{toppings|json}}

//in your .ts
toppings:any[]=[]

或

<mat-form-field>
  <mat-select placeholder="Toppings" [(formControl)]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>
{{toppings.value|json}}
//in your .ts
  toppings = new FormControl();

【讨论】：

【解决方案3】：

我想通了。我需要取消选择的值，因为我有更多具有相同 ngModel/值的 mat-selects。为了解决它，我使用了SelectionModel Class。

【讨论】：