如何使用 ngFor 获取两个数组答案

【问题标题】：how to use ngFor to fetch two array如何使用 ngFor 获取两个数组
【发布时间】：2016-07-10 16:46:19
【问题描述】：

我是 Angular2 的新手。我想在 li 中获取两个数组，如下所示：

[array2]中的[array1]

例如，我有两个数组，第一个用于 Names，第二个用于 Ages，我希望得到这样的输出：
name in age

而且我知道可以为此使用 2D 数组，但我不想要。我想知道 ngFor 有哪些可能？

这是我的 Angular 代码：

@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"];
}

我想要这样的结果（但不改变数组格式）

N1 20 岁

15 岁 N2

37岁N3

【问题讨论】：

你能把你的数组放在这里吗？谢谢！
你能举一个具体的例子来说明你想要什么吗？我现在还不清楚。
是的，但由于该代码不是有效代码，我们只能猜测它应该做什么。结果应该是什么？你想生成什么 HTML？我的猜测是你想做 Pierre Urban 的回答所显示的，但也许不是。

标签： angular

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

在我看来，这更像是一个数据建模问题。

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

{ name: string, age: number }

因此，您的数组将具有 person[] 类型。然后在您的模板中，您可以使用结构指令 *ngFor 如下：

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

【讨论】：

如果你真的想保留两个数组，那么你可以使用 *ngFor="let name of names; let i = index" 中的索引，然后 {{age[ 中的 {{name}} i]}} 年龄。