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

Question

我想动态地使用带有typescript的循环来添加div。我想复制下面的伪代码在我的.ts组件文件：

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

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

我假设我可以接着使用HTML元素的数组滑入html的组件文件：

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

Answer 1

你应迭代您的对象，并在模板中创建内部html，如下所示：

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

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