Наблюдаемая подписка на onInit запускается только один раз

Question

У меня есть таблица с именами и входной тег, который при изменении значения фильтрует содержимое таблицы. Данные поступили и http запрос на службу.

У меня есть три сценария ios:

1 - Если я подпишусь на this.ds.getDrogas() только на ngOninit(), таблица покажет все контент, но фильтр не работает. 2- Если я подписываюсь на this.ds.getDrogas() только на filterName(), таблица начинается пусто, но когда я меняю один раз, значение ввода y начинает работать хорошо. Если я удаляю содержимое ввода, в таблице отображаются все данные, и если я что-то снова пишу, фильтр работает. 3- Если я подписываюсь в обоих, это работает как ожидалось. Таблица начинает показывать весь контент, и когда изменяется входное значение, фильтр работает.

Я знаю, что код внутри ngOnInit() запускается только один раз, но подписка не должна продолжать прослушивать наблюдаемые изменения?

Заранее признателен за помощь.

Сервисная сторона:

getDrogas(): Observable <HttpResponses> {
    return this.http.get<HttpResponses>(this.apiUrl +'/drogas')
  }

Table-Component.ts:

    ngOnInit{
        this.ds.getDrogas().pipe(
        map((data)=> data.data
        .filter(element=> element.identificacion.nombre.startsWith(this.contador))))
        .subscribe(res=> {this.dataDroga= res; console.log('Ejecutado con valor de contador'+ 
        this.contador)});
    }

   contador: string =''

   filterName(){
   this.ds.getDrogas()
   console.log(this.dataDroga)
   }

Table-Component. html:

<input  type="text" [(ngModel)]='contador' (ngModelChange)='filterName()'>

Answer 1

this.ds.getDrogas() - возвращает наблюдаемое. И Angular не запрашивает данные с сервера без подписки. Вы подписываетесь на него в ngOnInit () - вот почему вы получаете исходные данные.

Я предлагаю использовать оператор denounceTime с темой внутри обработчика ngModelChange, чтобы предотвратить вызовы API при каждом изменении. Это будет выглядеть так:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  filterValue$ = new BehaviorSubject('');
  filterValue = '';

  constructor(private api: ApiSerive) {}

  ngOnInit(): void {
    this.filterValue$.pipe(
      debounceTime(DEBOUNCE_TIME),
      switchMap(filterValue => this.api.getData().pipe(
        map(dataFromServer => filterData(dataFromServer, filterValue)),
      )),
      /* UNSUBSCRIBE HERE on compoennt destroy */
      tap(filteredData => {
        console.log(filteredData);
        /* LOGIC OF UPDATE TABLE */
      }),
    ).subscribe();
  }

  onFilterChanged(value: string): void {
    console.log(value);
    this.filterValue$.next(value);
  }
}

function filterData(dataFromServer: any, filterValue): any {
  // SOME LOGIC HERE
  return dataFromServer;
}

Полный код здесь https://stackblitz.com/edit/angular-txwgmk

PS

Не забудьте отписаться от наблюдаемых в Ваш компонент.

Надеюсь, это поможет!