Node.js 将图像限制为在NgFor循环中显示一次

我有一个我正在构建的活动页面，我只希望用户照片在我的ngfor循环中每个用户显示一次。但是现在，用户的照片每次都会重复。我只需要为它循环通过的每个新用户显示用户照片一次。 所以，在它显示item.opPhoto的地方，我只需要显示每个用户一次，或者基本上是useraccountpic div

<ng-container id="followed-user-row"  >
      <div id="follower-holder" *ngFor="let item of FolUserPosts">
      <div id="act-avatar">
          <div id="useraccountpic" >
              <img width="60" height="60"src="http://localhost:3333/uploads/{{item.opPhoto}}">
          </div>
      </div>
      <div id="act-feed">
        <div id="act-col">
          <div id="act-item-box" *ngFor="let photo of item.photos" (click)="gotoPost(item.uuid)">
            <div id="posttitle">{{item.title}}</div>
            <div id="act-feed-item">
                <img src="http://localhost:3333/uploads/{{photo.name}}">
            </div>

          </div>
        </div>
      </div>
    </div>
    <!-- <div style="clear:both;"></div> -->
    </ng-container> 

---

您可以获取循环的索引，并检查索引是否等于零（第一次迭代）。如果是，则呈现化身：

<ng-container id="followed-user-row"  >
  <div id="follower-holder" *ngFor="let item of FolUserPosts; let i = index">
    <div id="act-avatar" *ngIf="i === 0">
      <div id="useraccountpic" >
        <img width="60" height="60"src="http://localhost:3333/uploads/{{item.opPhoto}}">
      </div>
    </div>
    <div id="act-feed">
      <div id="act-col">
        <div id="act-item-box" *ngFor="let photo of item.photos" (click)="gotoPost(item.uuid)">
          <div id="posttitle">{{item.title}}</div>
          <div id="act-feed-item">
            <img src="http://localhost:3333/uploads/{{photo.name}}">
          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- <div style="clear:both;"></div> -->
</ng-container>

{{item.title}

这将导致循环根本无法正常工作。循环也会吸引照片所属的用户。所以我试着在一行中显示用户的照片，然后是他们最后的五张照片。但是现在的情况是，它显示了用户的每一张照片。是的，这显示了第一张用户照片，然后停止。不显示第二个、第三个或第四个用户。我遇到的问题是，用户最初发布的每一张照片都会重复用户的照片。@Robert为了让我给你一个简洁的答案，我需要你解释一下你得到的有效载荷和你想要达到的目标。我继续向我的帖子添加了额外的信息。你能提供stackblitz吗？@Robert你能发布folUserPost示例数据吗？不知道如何在stackblitz上设置这些，但是我继续添加了来自后端和我的在我的typescript文件中查询。

 activityPosts = gql`
  query FollowedUserPosts {
    FollowedUserPosts {
      uuid,
      title,
      opFirstName,
      opLastName,
      opPhoto,
      photos {
        name
      }
    }
  }
`;

<ng-container id="followed-user-row"  >
  <div id="follower-holder" *ngFor="let item of FolUserPosts; let i = index">
    <div id="act-avatar" *ngIf="i === 0">
      <div id="useraccountpic" >
        <img width="60" height="60"src="http://localhost:3333/uploads/{{item.opPhoto}}">
      </div>
    </div>
    <div id="act-feed">
      <div id="act-col">
        <div id="act-item-box" *ngFor="let photo of item.photos" (click)="gotoPost(item.uuid)">
          <div id="posttitle">{{item.title}}</div>
          <div id="act-feed-item">
            <img src="http://localhost:3333/uploads/{{photo.name}}">
          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- <div style="clear:both;"></div> -->
</ng-container>