从 *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 创建了示例。

Answer 1

如doc中所述，您可以：

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

或者：

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

然后组件会检测到变化并更新。

Stackblitz

Answer 2

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

这将根据城市列表参考而改变

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

Removing item from *ngFor is not reflecting in ng-select dropdown

angular-ngselect

angular