заполнить ячейку в mat-таблице с помощью 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>

См. также: Угловой API для NgFor