Question

我有一个简单的查询，可以使用Angular 5中的httpClient post方法从API获取一些订单。

我得到了正确的答案，但我无法弄清楚如何在数据表中显示它们。

以下是我的尝试：

order.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Order } from '../models/order.model';

@Injectable()
export class OrderService {

  constructor(private http: HttpClient){
    console.log('OrderService Initialized...');
  }

  getOrders(): Observable<Order[]>{
    var url = 'http://example.com/api/orders?type=1';
    var headers = new HttpHeaders().set('x-mobile-token', 'xxxxx');
    return this.http.get<Order[]>(url, {headers: headers});
  }
}

orders.component.ts

import { Component, OnInit } from '@angular/core';
import { OrderService } from '../../services/order.service';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { User } from '../../models/order.model';

@Component({
  selector: 'orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.css'],
  providers: [OrderService]
})

export class OrdersComponent implements OnInit{

  constructor(private _orderService: OrderService, private router: Router, private cookieService: CookieService) {
    console.log('Orders Component Initialized...');
  }

  dataSource = new OrderDataScource(this._orderService);
  displayedColumns = ['id', 'courier', 'price', 'status', 'createdat'];
}

export class OrderDataScource extends DataSource<any> {
  constructor(private _orderService: OrderService){
    super();
  }

  connect(): Observable<Order[]>{
    return this._orderService.getOrders();
  }

  disconnect(){}
}

order.model.ts

export interface Order{
  id: number;
  courier: {
    name: string;
  },
  price: number;
  status: string;
  createdat: string;
}

orders.component.html

<div class="col-md-12">


<mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef>آیدی</mat-header-cell>
      <mat-cell *matCellDef="let order">{{order.id}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="courier">
      <mat-header-cell *matHeaderCellDef>نام پیک</mat-header-cell>
      <mat-cell *matCellDef="let order">{{order.courier.name}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef>قیمت</mat-header-cell>
      <mat-cell *matCellDef="let order">{{order.price}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="createdat">
      <mat-header-cell *matHeaderCellDef>زمان ثبت</mat-header-cell>
      <mat-cell *matCellDef="let order">{{order.createdat}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef>وضعیت</mat-header-cell>
      <mat-cell *matCellDef="let order">{{order.status}}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
</div>

我得到的只是浏览器中表格的标题和以下内容：

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

在控制台中。

以下回复是我通过邮递员获得的：

{
  "data": {
    "orders": [
      {
        "id": 1460,
        "customer_id": 98,
        "customer": {
          "id": 98,
        },
        "courier": {
          "user_id": 776,
          "fullname": "محمدحسن زارع",
          "rate_average": 5,
          "has_box": 0,
        },
        "invoice": {
          "price": 2500,
          "final_price": 2500,
          "payment_type": "credit"
        },
        "progress": 0,
        "transport_type": "motorbike",
        "updated_at": "5 ساعت و 14 دقيقه قبل",
        "created_at": "5 ساعت و 15 دقيقه قبل",
        "status": {
          "last_status": "delivering",
          "created_at": "5 ساعت و 14 دقيقه قبل"
        }
      }
    ]
  }
}

Answer 1

当您创建http.get时，您收到了一个Object，而不是一个数组。您必须返回作为对象数据属性的数组顺序

getOrders(): Observable<Order[]>{
    var url = 'http://example.com/api/orders?type=1';
    var headers = new HttpHeaders().set('x-mobile-token', 'xxxxx');
    return this.http.get<Order[]>(url, {headers: headers})
    .map(response=>response.data.orders); //Not return the response,
                          // just the property data.orders
  }

角度数据表结果：尝试diff'[object Object]'时出错。只允许数组和迭代

1 个答案: