Angular Material 7 Multi Select-设置所选值 [英] Angular Material 7 Multi Select - Set selected value

问题描述

我正尝试为多选下拉菜单设置选定的值，如下所示

I'm trying to set the selected value for multi select drop-down as below

//循环以使多个复选框处于选中状态&根据条件进行设置

//loop to make a multiple check boxes as 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)检索所有选中的复选框时

this only reflects the change cosmetically since when i try to retrieve all the selected checkbox through (selectionChange)=filter($event)

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

该事件似乎没有获得我们之前尝试设置的值，请​​让我知道该事件如何在选择垫子的情况下选择选定的值.

where the event doesn't seem to pick up the values we tried to set earlier, pls let me know how the event picks the selected values in case of mat select.

P.S:目标是在角度标签之间切换时保留多个选择框

P.S: goal is to retain multi select boxes when switching between angular tabs

推荐答案

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

You can set selected values with FormControl.setValue() function

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);
  }

请检查示例

这篇关于Angular Material 7 Multi Select-设置所选值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！