Angular2單個ngFor用於多個數組

Question

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對象，因此我需要顯示區域中的所有設備和設備。

Answer 1

使用concat連接兩個數組，然后ngFor使用ngFor

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

Answer 2

您可以如下連接兩個數組

this.elements= arr1.concat(arr2);

此外，為避免發生undefined錯誤，您應該使用？ 鍵入以下安全操作符

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