Get value of HTTPClient in Angular

问题

data-sharing.service.ts

public httpGetAll(owner: any) {
    return this.http.get(`${this.url}/${owner}`, this.httpOptions).pipe(
      catchError(e => {
        throw new Error(e);
      })
    );
  }


public httpGetAllBy(id: number, byId:string, owner: any) {
    return this.httpGetAll(owner).subscribe(data => {
      Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
    })

station.service.ts

getStationsByOrg(id) {
    return this.dataSharing.httpGetAllBy(id, 'orgId', 'station');
  }

managestation.component.ts

getStationsByOrg(id) {
    this.sta = this.staService.getStationsByOrg(id);
  }

managestation.component.html

<ion-content class="body">
  <ion-button expand="block" (click)="onAddStation()">Add Station
    <ion-icon name='add' slot="end"></ion-icon>
  </ion-button>
  <ion-list>
    <ion-item *ngFor="let s of sta">
      <ion-label>{{ s.name }}</ion-label>
      <ion-label>{{ s.orgId }}</ion-label>
      <ion-icon name='create' slot="end" (click)="onEditStation(s.id)"></ion-icon>
      <ion-icon name='trash' slot="end" (click)="onDeleteStation(s.id)"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

Error

ERROR Error: "[object Object]" Angular 11 core.js:4002

How can I get the values of httpGetAllBy in managestation.component.ts and assign it to this.sta. ?

回答1:

Modify your files as below

data-sharing.service.ts

public httpGetAllBy(id: number, byId:string, owner: any) {
    return new Promise((resolve, reject) => {
     this.httpGetAll(owner)
      .subscribe(data => {
        let filterdData = Object.keys(data).map(function(key) {
         return data[key].filter(x => x[byId] === id);
        });
        resolve(filterdData);
      })
    });
}

managestation.component.ts

getStationsByOrg(id) {
    this.staService.getStationsByOrg(id)
    .then((allData) => {
       this.sta = allData;
    })

  }

回答2:

You are returning subscription, but not data. Options:

2) return observable itself:

public httpGetAllBy(id: number, byId:string, owner: any) {
    return this.httpGetAll(owner);
}
getStationsByOrg(id) {
    return this.dataSharing.httpGetAllBy(id, 'orgId', 'station').subscribe(data=>{
      const var = Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
//your logic in station.service.ts
};
  }

2) use async/await to get data:

public async httpGetAllBy(id: number, byId:string, owner: any) {
    return await this.httpGetAll(owner).toPromise().then(data => {
      return Object.keys(data).map(function(key) {
        return data[key].filter(x => x[byId] === id);
      });
    })
getStationsByOrg(id) {
    return this.dataSharing.httpGetAllBy(id, 'orgId', 'station').then(data=>{
//your logic in station.service.ts
};

回答3:

You should return an Observable in your service and map it through pipe().

public httpGetAllBy(id: number, byId:string, owner: any) {
    return this.httpGetAll(owner).pipe(
        map( (data => {
            Object.keys(data).map(function(key) {
                return data[key].filter(x => x[byId] === id);
            });
        }))
    );
}

Then you can subscribe to in your component.

来源：https://stackoverflow.com/questions/59323612/get-value-of-httpclient-in-angular

标签

angular

typescript

ionic-framework