[英]Angular Material 7 Multi Select - Set selected value
我正在嘗試為多選下拉菜單設置選定的值,如下所示
//循環以根據條件選擇和設置多個復選框
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) 檢索所有選定的復選框時
<mat-select multiple (selectionChange)="filter($event)" formControlName="dropdown">
<mat-option *ngFor="let info of infos" [value]="info">
{{info}}
</mat-option>
</mat-select>
如果事件似乎沒有選擇我們之前嘗試設置的值,請讓我知道事件如何在 mat select 的情況下選擇選定的值。
PS:目標是在角度選項卡之間切換時保留多選框
您可以使用FormControl.setValue()
函數設置選定的值
示例.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>
示例.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);
}
請檢查示例
請參閱此堆棧閃電戰示例。
您可以使用formControl
屬性設置和獲取值。
這是工作良好的鏈接示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.