ngFor not showing data Ionic 4

I tried to loop my data in *ngFor but it's not showing data but in my console, it's showing. Below is my code that I tried.

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>&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>


In console it's showing data below it is

Continue reading...