How to create an array with results obtained through an observable<any[]> TYPESCRIPT

Question

Well, I get a key array,:

addprd(a:string){
 this.prdarray.push(a);
}

After adding the keys I want to use in the search I use the following medoto:

queryProd(as:string){
  const prdN :Observable<any[]>= this.db.list(`/Produto/${as}`).valueChanges();
  return prdN;
}

Thus returning an observable of this key,as I can make a "for" and store an array of results to display in my HTML?

Answer 1

An observable is just a statement of your query to a service, for you to actually have access to that observable data, you need to give a subscribe.

let prdn = queryProd('batata');

prdn.subscribe(data => {

    // data é o seu array
    for (let item of data) {
        console.log(item.algumDado);
    }
});

Answer 2

Do it like this:

In service:

queryProd(as:string){
  return this.db.list(`/Produto/${as}`);
}

getItems(ids: string[]): Observable<Item> {
 return from(ids).pipe(
    mergeMap(id => <Observable<Item>> this.queryProd(id ))
  );
}

In the Component:

produtos:Produto[] = [];
ids: string[] = [];

constructor(private seuServico:seuServico){}

ngOnInit() {
    this.seuServico.getItems(ids).subscribe(item=>produtos.push(item));            
}

HTML

<div *ngFor='let produto of produtos'>
    {{produto.preco}}
</div>