Angular 获取HTTPClient的角度值_Angular_Typescript_Ionic Framework

Angular 获取HTTPClient的角度值

angular typescript ionic-framework

Angular 获取HTTPClient的角度值,angular,typescript,ionic-framework,Angular,Typescript,Ionic Framework,数据共享.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:

数据共享.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);
      });
    })

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

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

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

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

  }

站点服务.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);
      });
    })

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

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

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

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

  }

managestation.component.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);
      });
    })

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

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

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

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

  }

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>


添加站
{{s.name}}
{{s.orgId}}

错误

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

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

您应该在服务中返回一个可观察对象，并通过管道（）将其映射

然后您可以在组件中订阅。

按如下方式修改您的文件

数据共享.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);
      });
    })

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

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

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

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

  }

managestation.component.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);
      });
    })

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

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

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

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

  }

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

2）可观测自身的返回：

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）使用异步/等待获取数据：

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

我有以下getStationsByOrg（）getUsersByOrg（）GetUsersByRog（）getUsersByStation（）getTanksByStation（）getPumpsByStation（）getPumpsByTank（），所以我想让httpGetAllBy（）有一个过滤函数，这样我就不必在上面所有的函数中重复它了。使用Promise方法修改答案。请再次检查。src/app/members/managestation/managestation.component.ts（65,10）中的错误：错误TS2739:类型“{}”缺少类型“Station”中的以下属性：id、名称、orgId、使用console.log工作的状态（allData）；但是在这里得到上面的错误。sta=allData；src/app/_services/data sharing.service.ts（177,9）中出错：错误TS2552:找不到名称“map”。你是说“地图”吗？不，你应该从RxJS导入它