Question

我有了这样的概念，如何像这样将简单的图像放入细胞中

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

但是我想知道最好的方法是显示一组星星。比方说，我有一个名为totalRaiting的字段，其值介于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>

Answer 1

您可以使用*ngFor避免有多个*ngIf。

<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>

Answer 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());
}

确保在可能的情况下始终以数字格式返回值

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

2 个答案: