Фильтрация значений Angle 6 mat-select без сброса исходного массива

Question

Я фильтрую массив по множественным выборкам из mat-select.Фильтрация работает нормально, за исключением того, что я выбираю опцию, а затем отменяю ее выборку, весь массив удаляется из пользовательского интерфейса.Если я затем выберу несколько вариантов, эти элементы массива будут показаны.Это не происходит с полем ввода, которое у меня есть в том же интерфейсе.

HTML:

<article *ngIf="monitors">
  <div class="title">
    <h1>{{title}}</h1>
  </div>
  <mat-card class="filters">

    <mat-form-field class="search">
      <input matInput type="text" placeholder="Search Monitors" [(ngModel)]="searchTerm">
      <button mat-button *ngIf="searchTerm" matSuffix mat-icon-button
        aria-label="Clear" (click)="searchTerm=''">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field class="categories">
      <mat-select placeholder="Filter categories" [formControl]="categories"
        (selectionChange)="filterCategories($event.value)" multiple>
        <mat-option *ngFor="let category of categoriesList" [value]="category">{{category}}</mat-option>
      </mat-select>
    </mat-form-field>

  </mat-card>

  <mat-card class="list">
    <mat-card-content>
      <mat-list>
        <mat-list-item *ngFor="let monitor of monitors | filter: searchTerm; last as last">
          <h2 class="topic" mat-line>{{monitor.topic}}</h2>
          <h4 class="description" mat-line>{{monitor.queryDescription}}</h4>
          <div class="categories" mat-line>
            <span *ngFor="let category of monitor.categories">
              {{category.value}}
            </span>
          </div>
          <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
        </mat-list-item>
        <mat-divider></mat-divider>
      </mat-list>
    </mat-card-content>
  </mat-card>
</article>

TS:

export class MonitorsComponent implements OnInit {
  title = 'Monitors';
  monitors: IMonitor[];
  originalMonitors: IMonitor[];
  searchTerm: string;
  categories = new FormControl();
  categoriesList: string[];
  selectedCategories: string[];

  constructor(private monitorService: MonitorsService) {}

  ngOnInit() {
    this.getMonitors();
  }

  filterCategories(categories: string[]) {
    this.monitors = this.originalMonitors.filter((monitor: IMonitor) => {
      return categories.some((category: string) =>
        monitor.categories.map((c: ICategory) => c.value).includes(category),
      );
    });
  }
}

Я получаю те же результатыпри использовании трубы.Как мне сбросить исходный массив после отмены выбора параметров?

РЕДАКТИРОВАТЬ: Вот Stackblitz, чтобы проиллюстрировать мою проблему - https://angular -yehvm6.stackblitz.io РЕДАКТИРОВАТЬ: И редактор - https://stackblitz.com/edit/angular-yehvm6

Answer 1

измените ваш обработчик кликов на:

 filterPizzas(toppings: string[]) {
    if(toppings && toppings.length >0){
          this.pizzas = this.originalPizzas.filter((pizza: IPizza) => {
      return toppings.some((topping: string) =>
        pizza.toppings.indexOf(topping) >= 0,
      );
    });
    }else{
      this.pizzas = [{ name: 'Cheese Supreme', toppings: ['Extra cheese'] }, { name: 'Meat Feast', toppings: ['Pepperoni', 'Sausage'] }, { name: 'Pizzazz', toppings: ['Extra Cheese', 'Pepperoni', 'Onion'] }]
    }

  }