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

Posted 2023-03-05

【中文标题】在 Angular 2/4 中使用 typescript 动态创建 HTML 元素数组

【英文标题】：Dynamically create array of HTML elements with typescript in Angular 2/4

【发布时间】：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>

【参考方案1】：

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

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

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