如何在 Angular 8 中操作 GET 響應？

Question

我有一個.Net核心Api：

  var response = new
            {
                Data = data,
                TotalPages = totalPages
            };
            return Ok(response);
        }

Data 是 Orders 的 IEnumerable，總頁數是 int。 我想在我的 Angular 應用程序中給出這個響應，所以我有一個服務

interface Response {
  totalPages: number;
  data: any;
}

@Injectable({
  providedIn: 'root'
})

export class OrderDataService {

  constructor(private http: HttpClient) {}

  getOrder(pageNumber: number, pageSize: number): Observable<any> {

    return this.http.get<Response>('http://localhost:5001/api/order/' + pageNumber + '/' + pageSize).pipe(
      map(res => res ),
      );
  }

}

我的組件如下所示：

  constructor(private orderData: OrderDataService) { }

  orders: Order [];
  page = 1;
  pageSize = 10;
  total = 0;

  ngOnInit() {
    this.getOrders();
  }

  getOrders(): void {
    this.orderData.getOrder(this.page, this.pageSize)
    .subscribe(res => {
      this.orders = X;
      this.total = Y;

    });

  }

我希望 this.orders 包含響應的 Data 部分，並且 this.total 包含 totalPages。

Answer 1

你已經有了答案，你只需要在訂閱中分配它：

this.order = res.data;
this.total = res.totalPages;

也嘗試使用 typescript 以最好的利用類型，您可以將 getOrder 的返回類型更改為Observable<Response> 。

還將您的接口聲明更改為：

interface Response {
  totalPages: number;
  data: Order[];
}

我也無法理解 getOrder function 中 map 的用途，我認為它應該如下所示：

 return this.http.get<Response>(`http://localhost:5001/api/order/${pageNumber}/${pageSize});