Angular2单个ng用于多个数组

时间:2017-04-17 12:40:43

标签: javascript angular angular2-directives ngfor

是否可以在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对象,因为我需要显示区域内的所有设备和设备。

2 个答案:

答案 0 :(得分:5)

使用concat连接两个数组,然后使用ngFor

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

答案 1 :(得分:0)

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

this.elements= arr1.concat(arr2);

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

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