使用Angular 2/4中的typescript动态创建HTML元素数组

Question

I want to dynamically add divs using a loop with typescript in angular. I want to reproduce the following pseudocode in my .ts component file:

i: number = 4;
arrayofHTMLelements: html elements = [];

for i in range (1, i):
    create div at index i

I'm assuming I could then slide the array of HTML elements into the .html component file using:

<li *ngFor="let arrayofHTMLelement of arrayofHTMLelements; let i = index">{{i + 1}}: {{arrayofHTMLelements}}</li>

Answer 1

You should iterate over your objects and create the inner html in the template like this:

const heroes = [
  { name: 'Spiderman' },
  { name: 'Superman' },
  { name: 'Superwoman!' }
]

template: `
  <ul>
    <li *ngFor="let hero of heroes">
      <div>{{hero.name}}</div>
    </li>
  </ul>
`