Show fields of two webservices in the same ion-item populated with * ngFor

Ionic Framework ionic-v3
1

I would like a tip, I populate a list with data coming from a webservice, through code:

 <ion-list>
        <ion-item *ngFor="let item of itens">
            {{item.id}}
            {{item.date}}
            {{item.anotherField}} //field from a request at another endpoint
        </ion-item>
</ion-list>

But in the item has an id that I need to use to make another request, how could I do this the moment I fill in the list?

I need to create an array, scroll and order for each id and then define that array in the * ngFor of the ion-list?

2

This isn’t how I would think of this. The ultimate consumer (the page containing this template) wants a list of completed items. It doesn’t want to worry about the fact that they need to be stitched together. So I would design this so that by the time these items get to the array, they are done. You could have two separate interfaces, one “heavy” one containing anotherField and one “light” one without it, or you could make anotherField optional, but either way you would be looking at something like the structure of the WombatService.

3

Thanks for the answer.
Well, I understood the solution but how could I do it using promises instead of Obervables?

I have no domain in the matter, is my code currently?
First I look for the comments and for each comment, I look for the user by id

public getComments(id: string): Promise<any> {
    
    return new Promise((resolve, reject) => {
        let url = `${this.url}?$filter=IdSolicitation eq ${id} and commentType eq 1&$orderby=commentDate desc`;
        this.http.get(url, {headers: this.headers})
        .map(res => res.json(), err => console.log(err))
        .subscribe((data) => {
            resolve(data);
        }, (error) => {
            reject(error);
        })
    })
  }

  getUser(id: string): Promise<any> {
        
    let path = URL_API + 'User/' + id; 

    let headers = new Headers({
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.token}`
    });

    return new Promise( (resolve, reject) => {
        this.http.get(path, {headers: headers})
        .map(res => res.json(), err => console.log(err))
        .subscribe((dados) => {
            resolve(dados);
        }, (error) => {
            console.log('motivo do erro: ' + error);
            reject(error);
        });
    });
4

I’m suggesting defining interfaces instead of abusing any, and explicit instantiation of Promises is an antipattern. You should get used to working with Observables, because Angular is full of them and the RxJS operator set is very comprehensive. If you absolutely insist on using Promises, spawn them using the toPromise operator instead of instantiating them from scratch.