在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> 
`