Angular 7 Фильтр выпадающих значений

Question

У меня есть два раскрывающихся списка. В первом выпадающем меню у меня есть значение как a, b, c, d Во втором выпадающем списке у меня есть такое же значение, как a, b, c, d

Требование

Когда я выбираю 1-й выпадающий список, выбранное значение из первого выпадающего списка не должно отображаться во втором выпадающем списке, а также наоборот. Например, я выбрал значение «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);
}

DEMO: https://stackblitz.com/edit/mat-select-filter-2usqw5

Answer 2

Пожалуйста, проверьте эту демонстрацию. Вы работаете с тем же массивом, поэтому он не работал

https://stackblitz.com/edit/mat-select-filter-wmlnsb

Выход: https://mat-select-filter-wmlnsb.stackblitz.io

Answer 3

Вы можете попробовать следующее

Компонент

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 , А в параметрах l oop проверьте, не равно ли значение параметра выбранному значению другого раскрывающегося списка, перед его отображением. Поскольку мы проверяем элемент перед отображением, фильтр можно удалить из обработчика событий изменения.

Я изменил ваш Stackblitz