onInit上的可观察订阅仅运行一次

Question

i具有带名称的表和一个输入标签，当值更改时，它会过滤表的内容。数据来自服务上的http请求。

我有三种情况：

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()-返回一个Observable。如果没有订阅，Angular不会从服务器请求数据。您在ngOnInit（）中订阅了它-这就是为什么要获取初始数据的原因。

如果要在更改过滤器值后再次获取数据，则代码应如下所示（与ngOnInit相同）。它获取数据，对其进行过滤并将结果保存到this.dataDroga

filterName(){
  this.ds.getDrogas().pipe(
    map((data)=> data.data.filter(element => 
      element.identificacion.nombre.startsWith(this.contador)
    )),
    tap(res => this.dataDroga = res),
  ).subscribe();
}

但是如果您不想再次获取数据，则需要将API响应存储在某个变量中，并使第二个变量具有过滤后的数据。您的表应绑定到第二个表

希望对您有所帮助！