如何在 Angular Material Table 单元格中显示一个或多个图像答案

【问题标题】：How can i display one or more Images in Angular Material Table cell如何在 Angular Material Table 单元格中显示一个或多个图像
【发布时间】：2020-01-17 15:46:44
【问题描述】：

我明白了如何像这样将简单的图像放入单元格中

<img [src]="element.imageUrl" />

但我想知道展示星星集合的最佳方式是什么。假设我有一个名为overallRaiting 的字段，其值为0 到5。如果值为0，我想不显示星，如果是1，则为1 星，如果为2，则为2 星，依此类推。这是我目前想出的方法，但希望有更好的方法。

    <ng-container matColumnDef="imageUrl">
    <th mat-header-cell *matHeaderCellDef> Image Url </th>
    <td mat-cell *matCellDef="let element"> 
      <img *ngIf="element.overallRaiting>=1" [src]="element.imageUrl" />
      <img *ngIf="element.overallRaiting>=2" [src]="element.imageUrl" />
      <img *ngIf="element.overallRaiting>=3" [src]="element.imageUrl" />
      <img *ngIf="element.overallRaiting>=4" [src]="element.imageUrl" />
      <img *ngIf="element.overallRaiting>=5" [src]="element.imageUrl" />
  </ng-container>

我必须为每个 nbr 做一个 *ngif 还是更清洁更可重用的方式？

好的，试过了

          <ng-container matColumnDef="overall_rating">
            <th mat-header-cell *matHeaderCellDef> Overall Rating </th>
            <td mat-cell *matCellDef="let element"> 
                <ng-container *ngFor="let i of [].constructor(element.overall_rating)">
                    <img class="star" src="../../assets/images/basic-5-point-gold-star-beveled.jpg" />
                  </ng-container>
              {{element.overall_rating}}
              </td>
          </ng-container>

在文档中产生这个

 <td _ngcontent-snv-c2="" class="mat-cell cdk-column-overall_rating mat-column-overall_rating" mat-cell="" role="gridcell"><!--bindings={
      "ng-reflect-ng-for-of": "4"
    }--><!----><img _ngcontent-snv-c2="" class="star" src="../../assets/images/basic-5-point-gold-star-beveled.jpg"> 4 </td>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以使用*ngFor 来避免多个*ngIfs。

<ng-container matColumnDef="imageUrl">
    <th mat-header-cell *matHeaderCellDef> Image Url </th>
    <td mat-cell *matCellDef="let element"> 
      <ng-container *ngFor="let i of [].constructor(element.overallRating)">
        <img [src]="element.imageUrl" />
      </ng-container>
    </td>
</ng-container>

还有其他ways，您可以使用*ngFor 重复一个元素，但这看起来更简单。

你也可以抽象出这个逻辑，创建一个以评分为输入并显示相应星数的子组件。

<ng-container matColumnDef="imageUrl">
    <th mat-header-cell *matHeaderCellDef> Image Url </th>
    <td mat-cell *matCellDef="let element"> 
      <app-star-rating [rating]="element.overallRating"><app-star-rating>
    </td>
</ng-container>

【讨论】：

我在您的第一次推荐中尝试了 *ngFor，但它似乎没有达到我的预期。在我的例子中 element.overallRating 是一个单一的数字，可以是 0 到 5
@NoSoup4you - 它在屏幕上显示什么？你有什么错误吗？我已将拼写更正为Rating，在您的问题中是Raiting。
@NoSoup4you - 查看我编辑的答案。我们必须在一个可迭代对象上使用*ngFor，但我之前只是在一个数字上使用它。现在修好了。
尝试了新代码，但仍然没有得到我需要的东西，我用更改和结果更新了我的问题
@NoSoup4you - 你所拥有的应该可以工作。查看我演示过的stackblitz.com/edit/angular-material-with-angular-v5-ldaaqk。另外，请将那里的代码替换为您的代码，完成后告诉我，我会看看。

【解决方案2】：

好的，基于@Nikhil 的回答，下面的代码现在对我有用。在我的情况下，问题最终是数字是字符串格式，它只创建了一个循环。

 <ng-container matColumnDef="overall_rating">
            <th mat-header-cell *matHeaderCellDef> Overall Rating </th>
            <td mat-cell *matCellDef="let element"> 
                <ng-container *ngFor="let i of [].constructor(NumberConverter(element.overall_rating))">
                    <img class="star" src="../../assets/images/basic-5-point-gold-star-beveled.jpg" />
                  </ng-container>
              </td>
          </ng-container>

然后在控制器上我添加了功能

NumberConverter(value: any) {
  if (value === null || value === undefined || typeof value === 'number') {
      return value;
  }

  return parseFloat(value.toString());
}

确保它总是以数字格式返回值（如果可能）

【讨论】：