Angular 5 update template after event

Question

This is my third post on angular. I want to display a list of type candidates: Candidate[]. I am currently displaying it in the view using an *ngFor like this:

    <ul>
        <li *ngFor="let candidate of candidates">
            {{ candidate.name }}
        </li>
    </ul>

However, i need to filter the candidates to fit the user search with a function :

  filterResults(queryString): void {
    this.candidatesService.filterCandidates(queryString).subscribe(candidates => this.filteredCandidates = candidates);
    this.filteredCandidates = this.filteredCandidates.filter(candidate => candidate.name == queryString);
  }

The problem is, the function is triggered on keyup of an input box. So, the filtered candidates array value is changing based on input.

Does anybody know how do i update the template view too, to only display the newly only the results in the updated array ?

Answer 1

在*ngFor创建temp并将您的候选者存储在temp[] ，该条件在不搜索条件时和在this.filteredCandidates过程中使用时将得到this.filteredCandidates并将其推入temp[]并显示。