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>

如果事件似乎没有选择我们之前尝试设置的值，请​​让我知道事件如何在 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屋！