如何使用thrid party api使用http Client绑定响应数据的角度

时间:2018-05-08 06:11:58

标签: angular

如何使用thrid party api使用http客户端以角度绑定响应数据。

在控制台中显示响应数据,但无法在我的UI中绑定列车路线数据enter image description here

我已将代码上传到github。请看一下我的代码。 https://github.com/vibhutikumar11/angularHttpClientGetRequest/

由于

2 个答案:

答案 0 :(得分:1)

Check this example

你只需要分配一个变量

  ngOnInit() { 
    this.http.get<DataResponse>('https://api.railwayapi.com/v2/route/train/12566/apikey/xg6ymuliox/').subscribe(data => {
         this.data = data;
        },
        (err: HttpErrorResponse) => {
          if (err.error instanceof Error) {
            console.log('Client-side error occured.');
          } else {
            console.log('Server-side error occured.');
          }
        }
      );
  }

答案 1 :(得分:0)

您可以使用async observables将数据从api直接绑定到角度组件。

在.ts

 myObservable = new Observable((observer) => {
  this.http.get<DataResponse>('https://api.railwayapi.com/v2/route/train/12566/apikey/xg6ymuliox/').subscribe(data => {
    observer.next(data);

         },
         (err: HttpErrorResponse) => {
           if (err.error instanceof Error) {
             console.log('Client-side error occured.');
           } else {
             console.log('Server-side error occured.');
           }
         }
       );
      }
      );

在.html中

<div *ngFor="let item of myObservable | async">
     Do any bindings you want
 </div>