代码之家 › 专栏 › 技术社区 › Kevin Blanc

角度2:NGF用于复杂对象

ngfor angular

4

Kevin Blanc · 技术社区 · 8 年前

我对使用ngofr在角度2中显示复杂对象有问题

jobs = [
    new Job('MacGronalds', [
        new Position("Sweeper"),
        new Position("burger flipper")
    ]),
    new Job('Starduck', [
        new Position("Sweeper"),
        new Position("burger flipper")
    ])
];

我怎样才能像那样遍历我的对象?

<li *ngFor="let job of jobs">
    {{ job.companyName }}
    <div *ngFor="let position of job">
        {{position.name}}
    </div>
</li>

谢谢

2 回复 | 直到 8 年前

1

2

Must.Tek 8 年前

您的模型应该如下所示。

    export class Job{
    constructor(
        public companyName : string,
        public positions: Position[]
   ) { }
}

  export class Position{
    constructor(
        public name: string
   ) { }
}

你有一个存储工作的字段,比如 private jobs : Job[];

然后您可以使用以下内容循环

<li *ngFor="let job of jobs">
    {{ job.companyName }}
    <div *ngFor="let position of job.positions">
        {{position.name}}
    </div>
</li>

2

1

bryan60 8 年前

假设“Positions”是作业上名为“Positions”的属性中的一个数组,则只需执行以下操作:

<div *ngFor="let position of job.positions">