Question

我是Angular2的新人。我想在下面的 li 中获取两个数组：

[array2]

中的

[array1]

例如，我有两个数组，第一个用于Names，第二个用于Ages，我希望得到这样的输出：
年龄名称

我也知道可以使用2D阵列，但我不想要。我想知道哪些是可能的ngFor？

这是我的角色代码：

@Component({
    selector:'peaple',
    template: `
        <h2>{{title}}</h2>
        <ul>
            <li *ngFor="#name of names">
                {{name}} in {{ages}} age
            </li>
        </ul>
        `
})
export class PeapleComponent{
    title = "Example";
    Names =["N1","N2","N3"];
    Ages=["20","15","37"];
}

我希望得到这样的结果（但不改变数组格式）

20岁时的N1

15岁的N2

37岁的N3

Answer 1

试试这个：

  <ul>
       <li *ngFor="let i of Names; let k = index">
       {{i}} in {{Ages[k]}} age
       </li>
    </ul>

Answer 2

这对我来说更像是一个数据建模问题。

我建议您使用以下人员界面将两个数组合并为一个：

{ name: string, age: number }

所以你的阵列会有一种人[]。然后在您的模板中，您可以使用结构指令* ngFor，如下所示：

<li *ngFor="let person of array">
  {{person.name}} is {{person.age}} year old
</li>

如何使用ngFor来获取两个数组

2 个答案: