Цикл по массиву, создание DOM-элементов с различным содержимым

Question

Я строю проект Angular 6, и я застрял, вот ситуация:

У меня есть массив с именем "technologies":

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

Iесть локально сохраненный JSON с именем "technologiesSource":

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

Я пытаюсь добиться того, чтобы Angular создавал элемент DOM для каждого элемента в массиве technologies -.Внутри этого 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, и я бы посоветовал вам следовать учебным пособиям и руководствам, доступным здесь