在 Angular 中获取 HTTPClient 的值

Question

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');
  }

ma​​nagestation.component.ts

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

ma​​nagestation.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>

错误

错误错误：“[对象对象]” Angular 11 core.js:4002

如何获取 managestation.component.ts 中 httpGetAllBy 的值并将其分配给 this.sta。 ?

Answer 1

如下修改你的文件

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);
      })
    });
}

ma​​nagestation.component.ts

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

  }

Answer 2

您正在返回订阅，但不是数据。选项：

• 2) 返回 observable 本身：

  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) 使用 async/await 获取数据：

  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
  };
  

Answer 3

你应该在你的服务中返回一个 Observable 并通过 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);
            });
        }))
    );
}

然后你就可以在你的组件中订阅了。