ng-select 在 Angular 6 中以编程方式删除元素

Question

我正在尝试使用该程序从 ng-select 中删除 selected 元素。因为我们可以使用单击十字按钮删除它，但我们想在 Angular 6 中以编程方式删除它。请帮我找到一个完美的解决方案。

Answer 1

您的 ng-select 与 selectedCityIds 双向绑定，这就是 [(ngModel)] 符号的作用。意思是，改变一个（GUI ng-select 或 class 属性 selectedCityIds）会改变另一个。这是一个建议的解决方案：

我创建了一个文本输入框，让用户可以输入城市名称。

<label>Type name of city to delete</label>
<input type="text" [(ngModel)]="cityToDelete" style="margin-left: 10px" />

那么，你的deleteSingle方法就这样完成了：

// This is the property bound to the text input
cityToDelete: string = "";
deleteSingle () {
  // This will be the city to delete
  const city = this.cities2.find(c => c.name === this.cityToDelete);
  // If city with this name is found in list, then it's removed
  if(city != null) {
    console.log(city);
    this.selectedCityIds = this.selectedCityIds.filter(id => id !== city.id);
  }
}

Stackblitz here.

试试看：

将 "Vilnius" 和 "Kaunas" 添加到您的 ng-select。
在文本输入中键入以上名称之一。
点击"Delete City By name"

您会看到您输入的城市名称将从 GUI 中删除。代码搜索了您的 ng-select 数据源，在您的示例中为 cities2。如果在 cities2 中找不到具有用户键入的名称的城市，则不会采取任何操作。

Answer 2

您只需要这一行：

this.selectedCityIds = this.selectedCityIds.filter(s => s != id);

你可以这样在你的函数中使用它；

deleteSingle (id: string) {
  this.selectedCityIds = this.selectedCityIds.filter(s => s != id);
}

ng-select 在 Angular 6 中以编程方式删除元素

ng-select remove the element in programmatic way in Angular 6

angular

typescript

multi-select

angular-ngselect