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

Question

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

标签： angular

Answer 1

您可以创建一个可重用的评级组件，如我在此示例stackblitz中所示