ng-select удалить элемент программно c способом Angular 6

Question

Я пытаюсь удалить выбранный элемент из ng-select с помощью программы. Как мы можем удалить его, нажав кнопку пересечения, но мы хотим удалить programmati c way в Angular 6. Пожалуйста, помогите мне найти идеальное решение.

Answer 1

Я добавил все доступные подходы. Вы можете найти их здесь: https://stackblitz.com/edit/angular-yblxng.

Также посмотрите здесь: https://github.com/ng-select/ng-select#change -обнаружение

Answer 2

Вам нужна только эта строка:

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

То есть вы можете использовать ее в своей функции таким образом;

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

Answer 3

Ваш ng-select имеет двустороннюю связь с selectedCityIds, это то, что делает нотация [(ngModel)]. Это означает, что изменение одного (либо GUI ng-select, либо свойства класса 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 здесь .

Попробуйте:

1. Добавьте "Вильнюс" и "Каунас" в свой ng-select.
2. Введите одно из вышеуказанных имен в текстовом поле.
3. Нажмите «Удалить город по имени»

Вы увидите, что название города, которое вы ввели, будет удалено из GUI. Код искал ваш ng-select источник данных, который * cities2 в вашем примере. Если город с именем, которое вводит пользователь, не найден в cities2, никаких действий не предпринимается.