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

【问题标题】：Removing item from *ngFor is not reflecting in ng-select dropdown从 *ngFor 中删除项目未反映在 ng-select 下拉列表中
【发布时间】：2021-06-29 04:49:51
【问题描述】：

我正在使用来自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 创建了示例。

【问题讨论】：

你能把你的代码放到stackblitz里吗

标签： angular angular-ngselect

【解决方案1】：

正如doc中提到的，你可以这样做：

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

或者：

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

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

Stackblitz

【讨论】：

【解决方案2】：

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

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

【讨论】：