如何在角度模板中迭代联合类型数组

Question

我是 Angular 的新手，开始研究版本 12，但我陷入了困境。我想在模板中迭代我的联合数组，但它给了我错误。

错误：输入“IBasketItem[] | IOrderItem[]' 不可分配给类型'NgIterable'。

这是我想要迭代的组件中的联合数组。

@Input() items: IBasketItem[] | IOrderItem[] = [];

这是模板代码

<tr *ngFor="let item of items" class="border-0">

它在“of”关键字下给了我一条红线，并出现上述错误

这是 IBasketItem 接口

export interface IBasketItem {
id: number;
productName: string;
price: number;
quantity: number;
pictureUrl: string;
brand: string;
type: string;

}

这是 IOrderItem 接口

export interface IOrderItem {
productId: number;
productName: string;
pictureUrl: string;
price: number;
quantity: number;

}

如果有人提出解决方案，我将不胜感激。

Answer 1

像这样声明类型数组 @Input() items: [IBasketItem | IOrderItem] = [];

那么这是可迭代的。

或者这样

@Input() items: Array<IBasketItem | IOrderItem> = [];