angular - ngFor 不显示数据 Ionic 4
问题描述
我试图在 *ngFor 中循环我的数据,但它没有显示数据,但在我的控制台中,它正在显示。下面是我尝试过的代码。
api.service.ts
getOrder(orderId): Observable<CustomerOrder> {
return this.http
.get<CustomerOrder>(this.apiUrl + 'OrderProduct/' + orderId)
.pipe(
retry(2),
catchError(this.handleError)
)
}
orderdetails.component.ts
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>
<ion-label>{{ord.OrderProducts?.Product}}</ion-label>
</ion-item>
<ion-item>
<p style="font-weight: bold">Quantity: </p>
<ion-label>{{ord.Quantity}}</ion-label>
</ion-item>
<ion-item>
<p style="font-weight: bold">Item Price: </p>
<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>
解决方案
我修好了它。在 ts 文件中,我像这样包装数据。
this.apiService.getOrder(this.orderId).subscribe(res => {
this.orderData = [res];
console.log(res);
});
推荐阅读
- rust - 如何使用 serde_json 从 JSON 数组中流式传输元素?
- visual-studio-code - 是否可以从 Markdown 运行 Visual Studio Code 命令?
- python - 如何启动 GUI 应用程序并仍然从 C# 重定向标准输入/标准输出?
- javascript - 使用 postgres 会话存储进行 fastify 和 prisma
- python - Django Rest Framework 帮助找出响应时间的瓶颈。我尝试了很多事情都没有成功
- html - 下拉菜单上的阴影过滤器在 Safari 浏览器中不起作用
- python-3.x - 如何将 cx_Oracle 与 Oracle 钱包一起使用
- c# - 操作方法:ActiveReports 15 Excel 导出在 49 处换行
- github - 如何在 github.io 上使用 Jekyll 制作一本书
- php - 如何通过mPDF将信息导出到单独页面的一个pdf文件中