Question

我正在构建Angular 6项目，但遇到问题，情况如下：

我有一个名为“ technologies”的数组：

["HTML", "CSS", "Angular"]

我有一个本地存储的JSON，名为“ technologiesSource”：

{
    "HTML": {
        "name": "HTML",
        "image": "html.png",
        "link": "https://blabla.de/"
    },
    [ ... ]
}

我试图实现Angular为technologies-数组中的每个项目创建一个DOM元素。在该DOM-元素内，它应根据technologiesSource-JSON内的详细信息打印一些信息，并将其作为子元素添加到某个DIV元素中。

我将尽力描述它的最佳方式：

for (i = 0; i < technologies.length; i++){

    GIVE Document.getElementById('techRow') THIS CHILD ELEMENT: {

        <div>
            // expected result: technologiesSource.HTML.image
            <img src="{technologiesSource[technologies[i]].image}" />

            // expected result: technologiesSource.HTML.name
            <h3>{technologiesSource[technologies[i]].name}</h3>
        </div>
    }

}

我觉得自己有点亲密，但是我现在被困住了，无法继续前进。

有人可以帮我弄清楚什么是正确的程序吗？

预先感谢

Answer 1

您应该像这样在组件模板中使用*ngFor：

<div id="techRow">
  <div *ngFor="let tech of technologies">
    <img [src]="technologiesSource[tech].image">
    <h3>{{technologiesSource[tech].name}}</h3>
  </div>
</div>

这是非常基本的Angular内容，我建议您遵循here

可用的教程和指南

遍历数组，创建具有不同内容的DOM元素

1 个答案: