通过ngFor - Angular 5在图像渲染之间添加文本

Question

我有3张图片通过此代码 * ngFor

呈现

<img *ngFor="let resource of task.resourceList"
        [src]="imagePath+resource.iconPath" alt="user" class="img-responsive radius m-r-10" style="width:40px; cursor:default;">

将呈现此

我想至少将箭头>>放在这些图标之间，如何在Angular中做到这一点？

Answer 1

尝试这样的事情：

<span *ngFor="let resource of task.resourceList; last as isLast">
  <img [src]="imagePath+resource.iconPath" 
       alt="user" 
       class="img-responsive radius m-r-10" 
       style="width:40px; cursor:default;">

  {{ isLast ? '' : ' >>> ' }}
</span>

您还可以在一个ngFor

中用箭头包装图像和跨度

Answer 2

您可以使用ngFor的扩展语法和last：

<ng-template ngFor let-resource let-last="last" [ngForOf]="task.resourceList"> 
   <img [src]="imagePath+resource.iconPath" alt="user" class="img-responsive radius m-r-10" style="width:40px; cursor:default;">
   <span *ngIf="!last"> &gt;&gt; </span>
</ng-template>