Angular如何将ngOnInit循环生成的0、1、2不使用数组渲染到HTML

实现方案（两种都无需额外定义业务数组） #

方案1：直接在模板内生成序列

不需要修改你现有ts文件的逻辑，直接在HTML模板中使用*ngFor结合数组构造器生成所需序列：

<!-- 直接输出0 1 2 -->
<ng-container *ngFor="let _ of [].constructor(3); let idx = index">
  {{ idx }}
</ng-container>

<!-- 如果你需要和控制台输出一样的格式，就用下面的写法 -->
<ng-container *ngFor="let _ of [].constructor(3); let idx = index">
  <p>Number {{ idx }}</p>
</ng-container>

这种方法全程不需要你在组件类中操作或定义数组，完全在模板层完成需求。

方案2：组件内拼接结果后在模板展示

如果需要复用你现有ts文件中的循环逻辑，只需要新增一个属性存储循环生成的结果即可：
修改你的组件ts代码：

export class AppComponent {
  // 新增属性存储生成的数值文本
  displayNums = '';

  ngOnInit() {
    for (let i = 0; i < 3; i++) {
      console.log('Number ' + i);
      // 把数值追加到展示属性中
      this.displayNums += `${i} `;
    }
  }
}

之后在HTML中直接引用该属性即可：

{{ displayNums }}

内容的提问来源于stack exchange，提问作者user13829429