TA貢獻1835條經驗 獲得超7個贊
一種方法是根據您的要求構建模型。您目前有 2 個下拉菜單，但只有一個列表同時驅動它們。
相反，我會為每個選擇創建一個數組，并將所選值綁定到每個下拉列表的屬性。然后，當值更改時重建數組變得相當簡單。
<mat-form-field>
<mat-select [(ngModel)]="selected1" (selectionChange)="change1()" placeholder="Custom placeholder">
<mat-option *ngFor="let item of filtered1" [value]="item.id">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
<br>
<mat-form-field>
<mat-select [(ngModel)]="selected2" (selectionChange)="change2()" placeholder="Using array of objects">
<mat-option *ngFor="let item of filtered2" [value]="item.id">
{{item.name}}
</mat-option>
</mat-select>
</mat-form-field>
filtered1: {}[];
filtered2: {}[];
selected1: number;
selected2: number;
private options = [
{
id: 0,
name: 'a'
},
{
id: 1,
name: 'b'
},
{
id: 2,
name: 'c'
},
{
id: 3,
name: 'd'
}
];
ngOnInit() {
this.selected1 = this.options[0].id;
this.selected2 = this.options[1].id;
this.change1();
this.change2();
}
change1() {
this.filtered2 = this.options.filter(x => x.id !== this.selected1);
}
change2() {
this.filtered1 = this.options.filter(x => x.id !== this.selected2);
}
演示：https ://stackblitz.com/edit/mat-select-filter-2usqw5
TA貢獻1820條經驗 獲得超2個贊
你可以試試以下
零件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
dropdownOne: string;
dropdownTwo: string;
public variables2 = [
{
id: 0,
name: 'a'
},
{
id: 1,
name: 'b'
},
{
id: 2,
name: 'c'
},
{
id: 3,
name: 'd'
}
];
public filteredList5 = this.variables2.slice();
change(e){
}
}
模板
<mat-form-field>
<mat-select [(ngModel)]="dropdownOne" (selectionChange)="change($event)" placeholder="Custom placeholder">
<ng-container *ngFor="let item of filteredList5">
<ng-container *ngIf="item != dropdownTwo">
<mat-option [value]="item">
{{item.name}}
</mat-option>
</ng-container>
</ng-container>
</mat-select>
</mat-form-field>
<br>
<mat-form-field>
<mat-select [(ngModel)]="dropdownTwo" (selectionChange)="change($event)" placeholder="Using array of objects">
<ng-container *ngFor="let item of filteredList5">
<ng-container *ngIf="item != dropdownOne">
<mat-option [value]="item">
{{item.name}}
</mat-option>
</ng-container>
</ng-container>
</mat-select>
</mat-form-field>
下拉列表中的值綁定到變量dropdownOne和dropdownTwo. 在選項循環中，在顯示選項之前檢查選項的值是否不等于另一個下拉列表的選定值。由于我們在顯示之前檢查項目，因此可以從更改事件處理程序中刪除過濾器。
舉報