订阅 observables 时在 angular 中显示未定义的响应

Question

我有 get 方法，它从一些 Api 中获取数据，响应（我使用邮递员得到这个 JSON 数据）是：

{
    "content": [
        {
            "order_id": 6,
            "todayDate": "2020-07-04T15:09:40.556+0000",
            "status": "pending"
        },
        {
            "order_id": 7,
            "todayDate": "2020-07-04T15:13:16.464+0000",
            "status": "pending"
        },
        {
            "order_id": 8,
            "todayDate": "2020-07-05T13:41:13.337+0000",
            "status": "pending"
        },
        {
            "order_id": 9,
            "todayDate": "2020-07-05T13:58:21.771+0000",
            "status": "pending"
        },
        {
            "order_id": 10,
            "todayDate": "2020-07-05T14:03:07.791+0000",
            "status": "pending"
        }
    ],
    "pageable": {
        "sort": {
            "sorted": false,
            "unsorted": true,
            "empty": true
        },
        "offset": 5,
        "pageSize": 5,
        "pageNumber": 1,
        "paged": true,
        "unpaged": false
    },
    "totalElements": 39,
    "totalPages": 8,
    "last": false,
    "size": 5,
    "number": 1,
    "sort": {
        "sorted": false,
        "unsorted": true,
        "empty": true
    },
    "numberOfElements": 5,
    "first": false,
    "empty": false
}

所以，通常在收到 AJAX 的回复时，我曾经这样做，console.log(res.content) 它会给我正确的订单列表。但是，在我的服务 class in angular 9 中，我使用接口来映射响应，但它不起作用。

import { Injectable } from '@angular/core';
import { CartItem } from '../common/cart-item';
import { Subject, Observable } from 'rxjs';
import { Order } from '../common/order';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class CartService {

  private baseUrl="http://localhost:8080/api/test";

  constructor(private httpClient:HttpClient) { }


  getOrderDetails():Observable<Order[]>{
    const orderUrl=`${this.baseUrl}`+'/getAllPendingOrders';
    return  this.httpClient.get<GetResponseOrder>(orderUrl).pipe(
      map(response => response.content.orders)
       );
  }
  
}
interface GetResponseOrder {
  content :{
     orders :Order[];
    }
}

我在 myorder.component.ts 中订阅为：

  ngOnInit(): void {
    this._cartService.getOrderDetails().subscribe((res) =>{
       console.log(res);
           
    }); 
  }

但是，在我的控制台上，我看到 undefined 在尝试查看 response.So 时，我的 Order.ts 文件是：

export class Order {
 
    order_id:Number;
     todayDate:Date;
    status:String;
}

Answer 1

关于你的回复，我觉得应该是

getOrderDetails():Observable<Order[]>{
 const orderUrl=`${this.baseUrl}`+'/getAllPendingOrders';
 return  this.httpClient.get<GetResponseOrder>(orderUrl).pipe(
   map(response => response.content)
   );
}

内容是一个数组，我看不到命令，你的界面变成了

interface GetResponseOrder {
 content : Order[];
}

订阅 observables 时在 angular 中显示未定义的响应

Response showing undefined in angular when subscribing observables

typescript

angular

angular9