Angular Http 调用映射 Api 响应答案

【问题标题】：Angular Http Call map Api ResponseAngular Http 调用映射 Api 响应
【发布时间】：2019-06-30 06:26:19
【问题描述】：

我想获得我的旅行，这是我从 Angular 中的 API 得到的回应。

我从后端得到：

{
  "trips": [
    {
      "id": 0,
      "name": "string",
      "startDate": "2019-06-30T06:05:48.006Z",
      "endDate": "2019-06-30T06:05:48.006Z",
      "description": "string",
      "roomSharing": true,
      "countries": [
        {
          "id": 0,
          "name": "string",
          "code": "string"
        }
      ],
      "languages": [
        {
          "id": 0,
          "name": "string",
          "code": "string"
        }
      ]
    }
  ]
}

这很好，但我在客户端遇到了问题。这是我的旅行代码：

  getTrips(): Observable<Trip[]> {
    return this.http.get<Trip[]>(this.apiUrl + '/Trip/Get')
      .pipe(
        tap(_ => console.log('fetched trips')),
        retry(1),
        catchError(this.handleError),
        map(data => {
          return data;
        })
      );
  }

在我的组件中我有：

  loadTrips() {
    return this.rest.getTrips()
    .subscribe((data) => {
      this.trips = data;
      console.log(this.trips);
    }
    , err => console.log(err));
  }

我想在这样的模板中获得旅行：

<div class="card mb-3 trip" *ngFor="let trip of trips">

但我必须喜欢：

<div class="card mb-3 trip" *ngFor="let trip of trips.trips">

那么，问题是如何映射我的响应以获取 Trip 数组而不是 Array of Trips 数组？

【问题讨论】：

如果trips 有一个trips 属性，那么它就不是Trip[]。如果您从一个实际表示数据的接口开始，并键入 loadTrips 的返回值，编译器可以提供更多帮助。我建议启用 TS 严格模式以防止隐式任何。

标签： javascript angular typescript observable

【解决方案1】：

除非我有什么误解，否则应该可以：

  interface TripsResponse {
    trips: Trips[],
  }

  getTrips(): Observable<Trip[]> {
    // use your response interface instead
    //return this.http.get<Trip[]>(this.apiUrl + '/Trip/Get')
    return this.http.get<TripsResponse>(this.apiUrl + '/Trip/Get')
      .pipe(
        tap(_ => console.log('fetched trips')),
        retry(1),
        catchError(this.handleError),
        map(data => {
          return data.trips; // set it properly here
        })
      );
  }

【讨论】：

好的，但是我怎么能没有像'Trip[]'类型上不存在'Property'trips'这样的警告。 ?现在，我在 src/app/trips-list/trips-list.component.ts(23,25) 中遇到错误：错误 TS2339：“Trip[]”类型上不存在属性“trips”。
查看我的更新答案，并将其设置在此处而不是在我的初始帖子中。
您必须删除get 请求中的<Trip[]>，如我最近的答案更新所示，或者创建一个与您的API 返回的内容相匹配的新数据结构。
@jkniotek 我仍然在 src/app/services/rest.service.ts(35,23) 中收到错误：错误 TS2339：“对象”类型上不存在属性“行程”。
我最近更新的内容应该可以工作......我回家后会再次检查。

【解决方案2】：

更改您的退货声明：

return this.http.get('/Trip/Get')
  .pipe(
    tap(_ => console.log('fetched trips')),
    retry(1),
    catchError(this.handleError),
    map((data: TripsResponse) => {   // change made here; make data of type TripsResponse 
      return data.trips; 
    })
  );

TripsResponse 在哪里

interface TripsResponse {
   trips: Trips[],
   ... // other fields for future if required
}

【讨论】：

我个人认为这是要走的路……（+1）
哈哈。谢谢Ploppy！
绝对不是 +1 :D
感谢@Shashank！

【解决方案3】：

不要因为.map而过于复杂，只需这样做：

 loadTrips() {
    return this.rest.getTrips()
    .subscribe((data) => {
      this.trips = data.trips;
    }
    , err => console.log(err));
  }

另外，更正您创建的模型Trip[] 应该是

export interface ITripsResponse {
    trips: Trips[],
  }

return this.http.get<ITripsResponse>(this.apiUrl + '/Trip/Get')

否则，请通过
更正.map

    map((data) => {   
      return data.trips; 
    })

然后Observable<Trip[]> 将是一个有效的返回类型

【讨论】：