Angular - асинхронная труба и поиск

Question

Я знаю, что это совершенно неправильно .... Но я не могу найти пример для реализации

search = '';
ngOnInit() {
    this.countries$ = this.areasService.getCountries(this.search); //HttpClient request
}

search(key) {
    this.search = key;
    this.countries$.next();
}

<ul>
    <li *ngFor="let c of (countries$ | async)?.docs">{{c.name}}</li>
</ul>

Answer 1

Для того, чтобы иметь возможность подписываться и публиковать в заметках, вы можете использовать Subject.

Имея это в виду, вы можете инициировать ваш http-вызов и передать новое значение вашей теме.

search = '';
countries$ = new Subject();
ngOnInit() {
    this.refreshCountries();
}

search(key) {
    this.search = key;
    this.refreshCountries();
}

refreshCountries(){
    this.areasService.getCountries(this.search)
       .subscribe((value) => {
         if(value && value.docs){
            console.log('received docs =', value.docs);
            this.countries$.next(value.docs)); //HttpClient request
         }
}

<ul>
    <li *ngFor="let c of (countries$ | async)">{{c.name}}</li>
</ul>

Примечание. Чтобы сократить количество запросов (с которыми вы скоро столкнетесь), вы можете использовать debounceTime