angular - 从 *ngFor 中删除项目未反映在 ng-select 下拉列表中

Question

我正在使用来自https://www.npmjs.com/package/@ng-select/ng-select的 ng-select 库。

最初我创建了一些值的下拉列表。

    <ng-select
      [items]="cities"
      bindLabel="name"
      placeholder="Select city"
      [(ngModel)]="selectedCity">
    </ng-select>

cities = [
    { id: 1, name: 'Vilnius' },
    { id: 2, name: 'Kaunas' },
    { id: 3, name: 'Pavilnys' },
    { id: 4, name: 'Pabradė' },
    { id: 5, name: 'Klaipėda' }
  ];

现在，我想在运行时从上述城市列表中删除一些项目。

为此，我在该列表上调用 splice 以删除这些项目。

removeItem() {
    this.cities.splice(0, 1);
  }

该值已从列表中删除，但相同的内容并未反映在 UI 部分。

我也尝试过更改检测策略，但没有奏效。

我在https://stackblitz.com/edit/ng-select-21cubn创建了示例。

标签： angularangular-ngselect

Answer 1

如文档中所述，您可以执行以下操作：

this.cities.splice(0, 1);
this.cities = [...this.cities];

或者：

this.cities = this.cities.slice(1);

然后组件将检测更改并更新。

堆栈闪电战