Шаблон обновления Angular 5 после события

Это мой третий пост на angular. Я хочу отобразить список кандидатов типа: Candidate[]. В настоящее время я показываю его в представлении, используя *ngFor следующим образом:

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

Однако мне нужно отфильтровать кандидатов, чтобы они соответствовали поиску пользователя с помощью функции:

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

Проблема в том, что функция срабатывает при нажатии на поле ввода. Таким образом, значение массива отфильтрованных кандидатов меняется в зависимости от ввода.

Кто-нибудь знает, как обновить представление шаблона, чтобы отображались только новые результаты в обновленном массиве?