Angular 7过滤器下拉值

Question

我有两个垫选择下拉菜单。在第一个下拉菜单中，我的值类似于 a,b,c,d 在第二个下拉菜单中，我的值相同，例如 a,b,c,d

要求

当我选择第一个下拉列表时，第一个下拉列表中的选定值不应出现在第二个下拉列表中，反之亦然。例如，我在第一个下拉列表中选择了“b”值，而不是在第二个下拉列表中选择了“b”不应该出现，只有 a、c、d 应该出现。

https://stackblitz.com/edit/mat-select-filter-nayx2k?embed=1&file=src/app/app.component.html

从上面的 stackblitz 我可以过滤值，但其他下拉值默认值被删除。

Answer 1

一种方法是根据您的要求构建模型。您目前有 2 个下拉菜单，但只有一个列表同时驱动它们。相反，我会为每个选择创建一个数组，并将所选值绑定到每个下拉列表的属性。然后，当值更改时重建数组变得相当简单。<mat-form-field>&nbsp; <mat-select [(ngModel)]="selected1" (selectionChange)="change1()" placeholder="Custom placeholder">&nbsp; &nbsp; <mat-option *ngFor="let item of filtered1" [value]="item.id">&nbsp; &nbsp; &nbsp; {{item.name}}&nbsp; &nbsp; </mat-option>&nbsp; </mat-select></mat-form-field><br><mat-form-field>&nbsp; <mat-select [(ngModel)]="selected2" (selectionChange)="change2()" placeholder="Using array of objects">&nbsp; &nbsp; <mat-option *ngFor="let item of filtered2" [value]="item.id">&nbsp; &nbsp; &nbsp; {{item.name}}&nbsp; &nbsp; </mat-option>&nbsp; </mat-select></mat-form-field>filtered1: {}[];filtered2: {}[];selected1: number;selected2: number;private options = [&nbsp; {&nbsp;&nbsp; &nbsp; id: 0,&nbsp;&nbsp; &nbsp; name: 'a'&nbsp;&nbsp; },&nbsp;&nbsp; {&nbsp;&nbsp; &nbsp; id: 1,&nbsp;&nbsp; &nbsp; name: 'b'&nbsp;&nbsp; },&nbsp; {&nbsp;&nbsp; &nbsp; id: 2,&nbsp;&nbsp; &nbsp; name: 'c'&nbsp;&nbsp; },&nbsp; {&nbsp;&nbsp; &nbsp; id: 3,&nbsp;&nbsp; &nbsp; name: 'd'&nbsp;&nbsp; }];ngOnInit() {&nbsp; this.selected1 = this.options[0].id;&nbsp; this.selected2 = this.options[1].id;&nbsp; this.change1();&nbsp; this.change2();}change1() {&nbsp; this.filtered2 = this.options.filter(x => x.id !== this.selected1);}&nbsp; &nbsp;&nbsp;change2() {&nbsp; this.filtered1 = this.options.filter(x => x.id !== this.selected2);}演示：https ://stackblitz.com/edit/mat-select-filter-2usqw5

Answer 2

你可以试试以下零件import { Component } from '@angular/core';@Component({&nbsp; selector: 'my-app',&nbsp; templateUrl: './app.component.html',&nbsp; styleUrls: [ './app.component.css' ]})export class AppComponent&nbsp; {&nbsp; &nbsp; dropdownOne: string;&nbsp; &nbsp; dropdownTwo: string;&nbsp; &nbsp; public variables2 = [&nbsp; &nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;id: 0,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;name: 'a'&nbsp;&nbsp; &nbsp; &nbsp; },&nbsp;&nbsp; &nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; id: 1,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; name: 'b'&nbsp;&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; id: 2,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; name: 'c'&nbsp;&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; id: 3,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; name: 'd'&nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; public filteredList5 = this.variables2.slice();&nbsp; &nbsp; change(e){&nbsp; &nbsp; }}模板<mat-form-field>&nbsp; <mat-select [(ngModel)]="dropdownOne" (selectionChange)="change($event)" placeholder="Custom placeholder">&nbsp; &nbsp; <ng-container *ngFor="let item of filteredList5">&nbsp; &nbsp; &nbsp; <ng-container *ngIf="item != dropdownTwo">&nbsp; &nbsp; &nbsp; &nbsp; <mat-option [value]="item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{item.name}}&nbsp; &nbsp; &nbsp; &nbsp; </mat-option>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; </ng-container>&nbsp; </mat-select></mat-form-field><br><mat-form-field>&nbsp; <mat-select [(ngModel)]="dropdownTwo" (selectionChange)="change($event)" placeholder="Using array of objects">&nbsp; &nbsp; <ng-container *ngFor="let item of filteredList5">&nbsp; &nbsp; &nbsp; <ng-container *ngIf="item != dropdownOne">&nbsp; &nbsp; &nbsp; &nbsp; <mat-option [value]="item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{item.name}}&nbsp; &nbsp; &nbsp; &nbsp; </mat-option>&nbsp; &nbsp; &nbsp; </ng-container>&nbsp; &nbsp; </ng-container>&nbsp; </mat-select></mat-form-field>下拉列表中的值绑定到变量dropdownOne和dropdownTwo. 在选项循环中，在显示选项之前检查选项的值是否不等于另一个下拉列表的选定值。由于我们在显示之前检查项目，因此可以从更改事件处理程序中删除过滤器。