ng-select перестает отвечать на запросы при привязке к Array.filter ()

Question

При связывании компонента ng-select с результатом Array.filter() выбор параметра из раскрывающегося списка приводит к тому, что страница перестает отвечать на запросы.

Существует ли правильный способ привязки к отфильтрованному массивуэлементы?

Пример StackBlitz

import { Component } from '@angular/core';

interface IListItem {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `
<ng-select
  [items]="items"
  bindLabel="name"
  placeholder="Select item..."
  [(ngModel)]="selectedItem">
</ng-select>`
})
export class AppComponent  {

  private readonly _items: IListItem[] = [
    { id: 1, name: "One" },
    { id: 2, name: "Two" },
    { id: 3, name: "Three" },
    { id: 4, name: "Four" },
    { id: 5, name: "Five" },
    { id: 6, name: "Six" },
    { id: 7, name: "Seven" },
    { id: 8, name: "Eight" },
    { id: 9, name: "Nine" },
    { id: 10, name: "Ten" }
  ];

  get items(): IListItem[] {
    return this._items.filter(i => i.id % 2 === 0);
  }

  selectedItem: IListItem;
}

Answer 1

Не используйте функцию с ng-select, она вызывается каждый раз, что делает ваш пользовательский интерфейс невосприимчивым.Вместо этого присвойте отфильтрованные результаты переменной

filteredItems  =   this._items.filter(i => i.id % 2 === 0);

STACKBLITZ DEMO