Angular NG4不显示数据

我试图在*ngFor中循环我的数据，但它没有显示数据，但在我的控制台中，它显示了。下面是我试过的代码

api.service.ts

    getOrder(orderId): Observable<CustomerOrder> {
       return this.http
      .get<CustomerOrder>(this.apiUrl + 'OrderProduct/' + orderId)
      .pipe(
        retry(2),
        catchError(this.handleError)
      )
  }

orderData: any[] = [];

ngOnInit() {
   this.orderId = this.activatedRoute.snapshot.params.orderId;
   this.apiService.getOrder(this.orderId).subscribe(res => {
  Object.assign(this.orderData, res);
  console.log(res);
});
}

orderdetails.page.html

<ion-card *ngFor="let ord of orderData">
      <ion-card-title>
        <h4 class="ion-text-center" style="font-weight: bold">{{ord.Customer?.Name}}</h4>
        <h5 class="ion-text-center">{{ord.OrderNo}}</h5>
      </ion-card-title>
      <ion-card-content>
       <ion-list>
          <ion-item>
            <p style="font-weight: bold">Items: </p>&nbsp;
            <ion-label>{{ord.OrderProducts?.Product}}</ion-label>
          </ion-item>
          <ion-item>
            <p style="font-weight: bold">Quantity: </p>&nbsp;
            <ion-label>{{ord.Quantity}}</ion-label>
          </ion-item>
          <ion-item>
            <p style="font-weight: bold">Item Price: </p>&nbsp;
            <ion-label>{{ord.ItemPrice}}</ion-label>
          </ion-item>
        </ion-list>
       </ion-card-content>
      <ion-button type="button" color="primary"
                  style="float: right; padding-right: 5px;padding-bottom: 3px;" 
        (click)="closeOrder()">
        Close
      </ion-button>
      <ion-button type="button" color="danger"
                  style="float: left; padding-left: 5px;padding-bottom: 3px;">
        Cancel
      </ion-button>

    </ion-card>

{{ord.Customer？.Name}
{{order.OrderNo}
项目：
{{order.OrderProducts？.Product}
数量：
{{ord.Quantity}}
商品价格：
{{ord.ItemPrice}}
接近
取消

在控制台中，它在下面显示数据

---

这实际上与离子无关，而是关于角度变化的检测

这是因为在呈现页面之前，您没有等待数据返回

对于代码的当前状态，最简单的方法是使用如下所示的容器包装离子卡元素

<ng-container *ngIf="orderData.length>1">
add you card HTML here
</ng-container>

在这里添加你的卡片HTML

数据的更改将触发

但由于您使用的是可观测数据，因此更好的方法是：

向HTML添加一个异步侦听器，该侦听器使用返回的数据：

{{ord.Customer？.Name}
{{order.OrderNo}
项目：
{{order.OrderProducts？.Product}
数量：
{{ord.Quantity}}
商品价格：
{{ord.ItemPrice}}
接近
取消

然后在typescript文件中：

orderData$：可观察；
恩戈尼尼特（）{
this.orderId=this.activatedRoute.snapshot.params.orderId；
this.orderData$=this.apiService.getOrder（this.orderId）；
}

这实际上与Ionic无关，而是关于角度变化检测

这是因为在呈现页面之前，您没有等待数据返回

对于代码的当前状态，最简单的方法是使用如下所示的容器包装离子卡元素

<ng-container *ngIf="orderData.length>1">
add you card HTML here
</ng-container>

在这里添加你的卡片HTML

数据的更改将触发

但由于您使用的是可观测数据，因此更好的方法是：

向HTML添加一个异步侦听器，该侦听器使用返回的数据：

{{ord.Customer？.Name}
{{order.OrderNo}
项目：
{{order.OrderProducts？.Product}
数量：
{{ord.Quantity}}
商品价格：
{{ord.ItemPrice}}
接近
取消

然后在typescript文件中：

orderData$：可观察；
恩戈尼尼特（）{
this.orderId=this.activatedRoute.snapshot.params.orderId；
this.orderData$=this.apiService.getOrder（this.orderId）；
}

我把它修好了。在ts文件中，我像这样包装数据

 this.apiService.getOrder(this.orderId).subscribe(res => {
  this.orderData = [res];
   console.log(res);
});

---

我修好了。在ts文件中，我像这样包装数据

 this.apiService.getOrder(this.orderId).subscribe(res => {
  this.orderData = [res];
   console.log(res);
});

---

谢谢你的支持。但是没用谢谢你的支持。但是没有工作啊，我现在看到你的订单结果不是数组。您的方法是有效的，但有点像黑客：）没有理由重复您知道的单一结果。尝试回到旧方法，使用*ngif=“orderData”并将orderData初始化为null。您可以只参考orderData.OrderId等。啊，我现在看到您的订单结果不是数组。您的方法是有效的，但有点像黑客：）没有理由重复您知道的单一结果。尝试回到旧方法，使用*ngif=“orderData”并将orderData初始化为null。您可以只参考orderData.OrderId等。