Цикл мат-значок на основе числового значения в шаблоне

Question

У меня есть таблица матов, где я пытаюсь найти эффективный способ вывести <mat-icon>star</mat-icon> умноженное на число из row.rating. Например, если рейтинг равен 4, я хочу, чтобы значок матовой звезды появлялся 4 раза и представлял 4 звезды. Звезды go до 5. Единственный способ сделать это - использовать * ngIf для <span id="ratingValue"><mat-icon>star</mat-icon></span с 5 различными сценариями ios каждая с разным количеством звездочек для представления значения row.rating, но я не думаю, что это очень эффективно. Я надеялся получить некоторые идеи. Я ценю любую помощь!

    <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">

      <ng-container class="tableStyle" matColumnDef="rating">
        <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Rating
        <td [ngStyle]="{'width': '20%'}" class="tableStyle" mat-cell *matCellDef="let row">
          <span id="ratingValue">
            {{row.rating}}<mat-icon>star</mat-icon></span></td>
      </ng-container>

    </table>

Answer 1

Вы можете создать повторно используемый компонент рейтинга, как я показываю в этом примере stackblitz