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

У меня есть простая функция поиска здесь, где пользователи могут искать курсы. В настоящее время у пользователей есть возможность добавлять условия поиска, например. 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)"?

Благодарю вас!


angular angular-template angular-ngmodel
person Matt    schedule 02.08.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

arrow_upward
0
arrow_downward

Я отредактировал ваш код, проверьте здесь: 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>
person Komal    schedule 02.08.2018