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>

  <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

Answer 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. 在选项循环中，在显示选项之前检查选项的值是否不等于另一个下拉列表的选定值。由于我们在显示之前检查项目，因此可以从更改事件处理程序中删除过滤器。