时间戳

首页 > 解决方案 > 仅在一个 ngFor 元素上显示图像

angular - 仅在一个 ngFor 元素上显示图像

问题描述

我的应用程序中有一个使用 ngFor 循环生成的时间线组件。但是，我想在第一个卡片元素中显示图像，但使用 ngFor 图像会显示多次。

.html 文件

<timeline color='primary'>
    <timeline-item *ngFor="let note of notes;index as i">
      <ion-icon name="calendar"></ion-icon>
      <ion-card [ngClass]="note.card ? 'card-item' : 'no-card' ">
        <ion-card-header>
          <b>Date:</b> {{note?.Created}}
        </ion-card-header>
        <ion-card-content [ngClass]="isMenuOpen[i] ? 'active' : 'inactive'" *ngFor='let ind of individuals'>
          <ion-list>
            <b>Injury On Arrival:</b> {{note?.Notes}}
          </ion-list>
          <ion-list>
            <b>Injury Desc:</b> {{ind.InjuryDesc}}
          </ion-list>
          <ion-list>
            Posted By: {{ind.FirstNameUser}} {{ind.LastNameUser}}
          </ion-list>
          <ion-list *ngFor='let img of pImages'>
                   <ion-col *ngIf='ind.Created === img.Added'>
                      <img src = "http://ccoulter12.lampt.eeecs.qub.ac.uk/api/{{img.Image}}"/>
                  </ion-col> 
          </ion-list>
        </ion-card-content>
      </ion-card>
    </timeline-item>
  </timeline>

标签： angularionic4ngfor

解决方案

推荐阅读