基于模板中的数值循环 mat-icon

Question

我有 mat-table，我试图找出一种有效的方法来输出 <mat-icon>star</mat-icon> 乘以 row.rating 的数字。例如，如果评级是 4，我希望垫子图标星出现 4 次以表示 4 星。星星上升到 5。我能想到的唯一方法是使用 *ngIf 表示 <span id="ratingValue"><mat-icon>star</mat-icon></span 有 5 个不同的场景，每个场景都有不同数量的星星来表示 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