用 ngfor 和数字填充 mat-table 中的单元格答案

【问题标题】：fill cell in mat-table with ngfor and number用 ngfor 和数字填充 mat-table 中的单元格
【发布时间】：2019-10-03 13:58:09
【问题描述】：

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

<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，则单元格中有 1 颗星。

谢谢

【问题讨论】：

你想在打字稿中声明一个数组，然后引用它而不是使用[].constructor(element.score);
我试过了，结果是一样的

标签： angular

【解决方案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

【讨论】：

element.score 不是一个数组，它是一个数字