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

【问题标题】：Dynamically create array of HTML elements with typescript in Angular 2/4在 Angular 2/4 中使用 typescript 动态创建 HTML 元素数组
【发布时间】：2018-01-22 10:39:06
【问题描述】：

我想使用带有角度的 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>

【问题讨论】：

标签： html arrays angular loops typescript

【解决方案1】：

您应该遍历您的对象并在模板中创建内部 html，如下所示：

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

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

【讨论】：