gpt4 book ai didi

Angular Material 7 Multi Select - 设置选定值

转载 作者:行者123 更新时间:2023-12-03 23:35:55 27 4
gpt4 key购买 nike

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

//循环以根据条件选择和设置多个复选框

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

这仅从外观上反射(reflect)了更改,因为当我尝试通过 (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 的情况下选择选定的值。

P.S:目标是在 Angular 选项卡之间切换时保留多选框

最佳答案

您可以使用 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);
}

请检查 example

关于Angular Material 7 Multi Select - 设置选定值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57107587/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com