javascript - 从给定 URL 获取数据时正确映射到接口(interface)

Question

我是 Angular 的新手，我试图将返回的 json 映射到我的界面但失败了。

这是我拥有的代码的链接。

• Stackblitz
• Json URL

Answer 1

您不需要使用映射，因为您的响应是对象，而且我看到您希望从中映射数据属性。

一种方法是

  getTestData(): Observable<TestObject>{
    const url = 'https://api.myjson.com/bins/11x4bx';

    // return this.http.get(url).pipe(
    //   map(response => ((response || {} as any).data || []).map(testData => this.mapTest(testData))));


    return this.http.get(url).pipe(
      map((resp: any) => {
          return <TestObject> {
            id: resp.data.id,
            view: resp.data.view,
            resourceName: resp.data.resourcename,
            loadCapacity: resp.data.loadcapacity
          }
      })
      );


  }

更干净的方式

  getTestData(): Observable<TestObject>{
    const url = 'https://api.myjson.com/bins/11x4bx';
    return this.http.get(url).pipe(pluck('data'));
  }