Angular Material 7 Multi Select - 设置选定值

Question

我正在尝试为 multi select 下拉菜单设置 selected 值，如下

//循环创建多个复选框作为selected & setting based on condition

document.getElementsByTagName('mat-pseudo-checkbox')[index].classList.add('mat-pseudo-checkbox-checked');
document.getElementsByTagName('mat-pseudo-checkbox')[index].setAttribute("ng-reflect-state","checked");

这仅反映了外观上的变化，因为当我尝试通过 (selectionChange)=filter($event)

检索所有 selected 复选框时

<mat-select multiple  (selectionChange)="filter($event)" formControlName="dropdown">
   <mat-option *ngFor="let info of infos" [value]="info">
      {{info}}
    </mat-option>
 </mat-select>

事件似乎没有获取我们之前尝试设置的值，请告诉我事件如何在 mat select 的情况下选择 selected 值。

P.S：目标是在 angular 选项卡

之间切换时保留多个 select 框

Answer 1

Here is working good link example

Answer 2

您可以使用 FormControl.setValue() 函数设置选定的值

example.component.html

<mat-select [formControl]="toppings" (selectionChange)="filter($event)" multiple [(value)]="selected" >
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>

example.component.ts

  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

  ngOnInit(){
    this.toppings.setValue(['Mushroom', 'Onion']);
  }


  filter(data){
    console.log(data.value);
  }

请检查example

Answer 3

查看此 stackblitz 示例。

您可以使用 formControl 属性设置和获取值。

Angular Material 7 Multi Select - 设置选定值

Angular Material 7 Multi Select - Set selected value

angular

angular-material

angular-ui

angular-material2