基于模板中的数字值的循环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 值，但我认为这不是很有效率。我希望得到一些想法。我很感激任何帮助！我有一个mat-table，我想找出一个有效的方法来输出数据。

    <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

你可以创建一个可重用的评级组件，就像我在这个例子中所展示的那样。爆料