用ngfor和数字填充垫表中的单元格

Question

我在填充单元格时遇到问题。我有一个垫子桌子

<ng-container matColumnDef="score">
<mat-header-cell mat-header-cell *matHeaderCellDef>
{{'label.score'|translate }}
</mat-header-cell>
<mat-cell mat-cell *matCellDef="let element">
<div *ngIf="element.score != null">
<span *ngFor="let item of [].constructor(element.score);
let i = index;">
<mat-icon>star</mat-icon>
</span>
</div> 
</mat-cell>
</ng-container>

ngFor 不会使用变量 element.score 创建星星。如果我将 element.score 替换为数字 3，则单元格中有 3 颗星，但如果 element.score 为 3，则单元格中有一颗星。

谢谢

Answer 1

如果 element.score 是一个数组，你可以只迭代元素：

<span *ngFor="let item of element.score; index as i;">
<mat-icon>star</mat-icon>
</span>

---

编辑：

如果您只有一个数字，则可以在组件中创建数组

public createArray(length: number): number[]
return Array(length).fill(0); // [0,0,0]
}

并在模板中使用此数组：

<span *ngFor="let item of createArray(element.score)">
<mat-icon>star</mat-icon>
</span>

参见：Angular Api for NgFor