...例如……

<div class="month" *ngFor="#item of myCollection; #i = index">
...
</div>

有可能做一些像……

<div class="month" *ngFor="#item of 10; #i = index">
...
</div>

...不诉诸于不优雅的解决方案,比如:

<div class="month" *ngFor="#item of ['dummy','dummy','dummy','dummy','dummy',
'dummy','dummy','dummy']; #i = index">
...
</div>

?


当前回答

你也可以用like that

export class SampleComponent {
   numbers:Array<any> = [];
   constructor() {
      this.numbers = Array.from({length:10},(v,k)=>k+1);
   }
}

HTML

<p *ngFor="let i of numbers">
   {{i}}
</p>

其他回答

下面是Angular的一些非常干净和简单的东西:

在.ts:

max = 10;    

. html:

<div *ngFor="let dummy of ','.repeat(max).split(','); index as ix">
   - {{ix + 1}}:
</div>
<div *ngFor="let number of [].constructor(myCollection)">
    <div>
        Hello World
    </div>
</div>

这是一个在myCollection中重复相同次数的好方法。

如果myCollection是5,Hello World会重复5次。

使用管道将数字转换为数组。

@Pipe({
  name: 'enumerate',
})
export class EnumeratePipe implements PipeTransform {
  transform(n: number): number[] {
    return [...Array(n)].map((_,i) => i);
  }
}

然后在模板中使用管道。

<p *ngFor="let i of 5 | enumerate">
   Index: {{ i }}
</p>

https://stackblitz.com/edit/angular-ivy-pkwvyw?file=src/app/app.component.html

请找到附件我的动态解决方案,如果你想在点击按钮后动态增加数组的大小(这就是我如何得到这个问题)。

必要变量的分配:

  array = [1];
  arraySize: number;

声明向数组中添加元素的函数:

increaseArrayElement() {
   this.arraySize = this.array[this.array.length - 1 ];
   this.arraySize += 1;
   this.array.push(this.arraySize);
   console.log(this.arraySize);
}

在html中调用函数

  <button md-button (click)="increaseArrayElement()" >
      Add element to array
  </button>

使用ngFor迭代数组:

<div *ngFor="let i of array" >
  iterateThroughArray: {{ i }}
</div>

@OP,你的“不优雅”解决方案已经非常接近了。

如何:

<div class="month" *ngFor="let item of [].constructor(10); let i = index">
...
</div>

这里我从一个空数组中获取Array构造函数:[]。构造函数,因为Array在模板语法中不是一个可识别的符号,而且我懒得像@pardeep-jain在他的第4个例子中那样在组件typescript中执行Array=Array或counter =Array。我调用它时不使用new因为new对于从array构造函数中获取数组来说是不必要的。

Array(30)和new Array(30)是等价的。

数组将为空,但这无关紧要,因为你实际上只是想在循环中使用i from;let i = index。

编辑以回复评论:

问:如何使用变量来设置NgFor循环的长度?

下面是一个关于如何呈现具有可变列/行的表的示例

<table class="symbolTable">
  <tr *ngFor="let f of [].constructor(numRows); let r = index">
    <td class="gridCell" *ngFor="let col of [].constructor(numCols); let c = index">
      {{gridCards[r][c].name}}
    </td>
  </tr>
</table>
export class AppComponent implements OnInit {
  title = 'simbologia';
  numSymbols = 4;
  numCols = 5;
  numRows = 5;
  guessCards: SymbolCard[] = [];
  gridCards: SymbolCard[][] = [];

  ngOnInit(): void {
    for (let c = 0; c < this.numCols; c++) {
      this.guessCards.push(new SymbolCard());
    }

    for (let r = 0; r < this.numRows; r++) {
      let row: SymbolCard[] = [];

      for (let c = 0; c < this.numCols; c++) {
        row.push(
          new SymbolCard({
            name: '' + r + '_' + c
          }))
      }
      this.gridCards.push(row);
    }
  }
}