нг начальная загрузка не работает с угловой реактивной формой

Question

Вот мой файл компонента

import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
import { map, switchMap, finalize, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
import { Subject, merge } from 'rxjs';

const states = [.....]

// inside class
@ViewChild('instance', {static: true}) instance: NgbTypeahead;
focus$ = new Subject<string>();
click$ = new Subject<string>();

search = (text$: Observable<string>) => {
const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
const inputFocus$ = this.focus$;

return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
  map(term => (term === '' ? states
    : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
);
}

И в моем html я использую привязку реактивной формы

<input
    id="typeahead-focus"
    type="text"
    class="form-control"
    formControlName="userAssigned" 
    [ngbTypeahead]="search"
    (focus)="focus$.next($event.target.value)"
    (click)="click$.next($event.target.value)"
    #instance="ngbTypeahead"
    />

также инициализировал мою форму внутри ngOnInit() вот так

this.form = this.fb.group({
  userAssigned: ['', Validators.required],
});

Когда я запускаю этот код и нажимаю на вход, я получаю результат в поп, но получаю эту ошибку.Также не удается получить результат, когда я очищаю первый результат.

Пожалуйста, помогите.

Answer 1

проблема в том, что когда объявлена ​​функция поиска, "экземпляр не определен".Это происходит, например, если у нас есть что-то вроде

<div *ngIf="form" [formGroup]="form">
...
</div>

Решение - добавить this.instance в фильтр, становится как this.instance && !this.instance.isPopupOpen

Итак, поиск завершенной функции

    search = (text$: Observable<string>) => {
    const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
    const clicksWithClosedPopup$ = this.click$.pipe(filter(() => 
      this.instance && !this.instance.isPopupOpen())); //<---HERE
    const inputFocus$ = this.focus$;

    return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
      map(term => (term === '' ? states
        : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
    );
  }