[英]mat-select selectionChange get group angular
我有兩個mat-optgroup
組的控制mat-select
,它們有一個事件處理程序(selectionChange)="applicationSelected($event.value, i)
。
如何檢測從哪個組中選擇了選項?
沒有一種簡單、直接的方法可以從selectionChange
事件中了解組。 它只告訴您來源 (MatSelect) 和選定的值。 但是 MatOption 的onSelectionChange
事件使您可以訪問 MatOption,而后者又可以訪問 MatOptionGroup。 例如:
<mat-option (onSelectionChange)="optionSelected($event)" ...>...</mat-option>
optionSelected(event: MatOptionSelectionChange) {
console.log(event.source.group.label);
}
我也遇到了這個問題,但請記住, onSelectionChanged() 的預期行為如下: 選擇更改事件不僅在選擇選項時觸發,而且在取消選擇時觸發。 因此,選擇選項后,將觸發兩個事件:用戶選擇和現在取消選擇的選項。 因此,您將看到 2 個事件被觸發。 其中第一個是所需的。 您可以查看 event.isUserInput 是否設置為 true(所需事件)並將 group.name 發送到事件處理程序:
在您的組件 html 中:
<mat-select formControlName="category" required> <mat-optgroup *ngFor="let group of categoryGroups" [label]="group.name"> <mat-option *ngFor="let category of group.options" [value]="category.value" (onSelectionChange)="onCategorySelection($event, group.name)"> {{category.viewValue}} </mat-option> </mat-optgroup> </mat-select>
以及您綁定到組件類中的事件的函數:
onCategorySelection(event: MatOptionSelectionChange, groupName: string) { if (event.isUserInput) { this.groupName = groupName; // event.source.group.label; } }
我還認為 mat-feature 不能輕松訪問組值,這有點有趣,因為 group 的所有想法都是將選擇選項分離到某些組,並且在許多情況下,用例是在使用所選選項對組數據進行邏輯級別處理。
這是我的解決方案:
<mat-form-field >
<mat-label>Filter By</mat-label>
<mat-select panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)" >
<mat-option >-- None --</mat-option>
<mat-optgroup #group1 *ngFor="let group of filterData" [label]="group.viewValue"
style = "background-color: #0c5460">
<mat-option #mmm *ngFor="let option of group.options" [value]="{value: option.value, groupValue: group.value}" >
{{option.viewValue}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
和功能:
doSomething1(value: any){
console.log("do something with ", value);//result: {value: "Honda", groupValue: "cars"}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.