Угловое динамическое изменение массива компонентов на основе ввода от пользователя

Question

У меня есть простая функция поиска здесь, где пользователи могут искать курсы. Пользователи в настоящее время имеют возможность добавлять поисковые термины, например, data, probability которые добавляются к свойству компонента, известного как searchTerms,

Я перебираю searchTerms с помощью *ngFor в представлении и хотел бы, чтобы пользователь мог удалить каждый термин, нажав на ✖ рядом с термином. Я определил removeTerm() метод как таковой:

removeTerm(term: string){
      var index = this.searchTerms.indexOf('term');
      if (index !== -1) this.searchTerms.splice(index, 1);
      this.filterByTerms();
    }

Как привязать каждый уникальный запрос к своей карте, чтобы при removeTerm() только этот термин удаляется из searchTerms массив? я представляю себе ngModel необходимо выполнить двухстороннее связывание данных, может быть что-то вроде [(ngModel)]='term' (click)="removeTerm(term)"?

Спасибо!

Answer 1

Вы можете просто передать индекс карты, которую хотите удалить, вот так (click)="removeTerm(term, index)"

И тогда в вашем контроллере

removeTerm(term: string){
  if (index !== -1) this.searchTerms.splice(index, 1);
  this.filterByTerms();
}

Answer 2

Я отредактировал ваш код, проверьте здесь: https://stackblitz.com/edit/angular-course-filter-pipe-3mdtgu?file=src/app/app.component.ts

Вам просто нужно удалить цитаты из термина:

removeTerm(term: string){
      var index = this.searchTerms.indexOf(term);
      if (index !== -1) this.searchTerms.splice(index, 1);
      this.filterByTerms();
    }

И добавьте термин при вызове функции removeTerm:

<a style="color: indianred; display: inline-block; padding-left: 6px;" (click)="removeTerm(term)">✖</a>