Angular2 单个 ngFor 用于多个数组

Posted 2023-02-22

【中文标题】Angular2 单个 ngFor 用于多个数组

【英文标题】：Angular2 single ngFor for multiple arrays

【发布时间】：2017-09-13 02:01:33

【问题描述】：

是否可以在 Angular 中为 ngFor 使用多个数组？

   *ngFor="let device of element.devices && element.zones.devices"// something like this

export interface Element 
    id: string;
    name: string;   
    zones: Zone[];
    devices: Device[];


export class Zone 
    id: string;
    name: string;
    devices: Device[];


export class Device 
    id: string;
    name: string;

我将可以访问 Element 对象，从中我需要显示区域内的所有设备和设备。

【问题讨论】：

那些expressions类似于javascript；你对arr1 && arr2.devices 有什么期望？

@jonrsharpe 我已经更新了我的问题

【参考方案1】：

使用concat 连接两个数组，然后在其上使用ngFor

*ngFor = "let device of arr1.concat(arr2.devices)"

【参考方案2】：

您可以连接两个数组，如下所示

this.elements= arr1.concat(arr2);

此外，为了避免undefined 错误，您应该使用 ? 类型安全运算符，如下所示

<div *ngFor="let device of elements?.devices">
    <span> device?.name </span>
</div>

【讨论】：

如果在 concat 之后列表元素发生了变化怎么办？我该如何处理这种情况？

通过改变你到底是什么意思

"Element" 我得到了@Input。用户可以将设备添加到此元素，也可以再次添加包含设备的区域。我需要将设备（独立）和位于区域内并以 html 显示的设备结合起来。如果用户添加或删除设备，则列表应更新。

@PratapA.K 如果您将所有设备连接到一个变量中，我们将其称为设备，然后迭代该 *ngFor="let device of devices" 然后更改检测将运行新设备或删除。