Question

我正在建立一个活动页面，我只希望用户照片在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>

这也是我为此编写的后端api调用：

FollowedUserPosts: async (_, __, context) => {
          let auth = context.auth;
          try {
              await auth.check()
              const users = await Database.table('users').select('*')
              for (let i=0; i<users.length; i++) {

                // Find users I follow
                const myfollows = await Follow.query()
                .where('follower_uuid', '=', user.uuid)
                .where('follow_uuid', '=', user.follow_uuid)
                .fetch()
                console.log(myfollows);

                  // Add profile Image
                  const photos = await PhotoUpload.query()
                  .where('belongsTo', '=', users[i].uuid)
                  .where('type', '=', 'userPhoto')
                  .fetch()
                  if (photos.rows.length >0) {
                      users[i].photo = photos.rows[0].name
                    //   posts[i].opFollows = user.myfollows;
                  }
              }

              // posts list from posts table
              const posts = await Database.table('posts')
                    .select('*')
                    // .limit(4)


              // loop posts
              for (let i=0; i<posts.length; i++) {

                  // user posted current post
                  const user = users.filter((value) => value.id === posts[i].op)[0];

                  posts[i].opFirstName = user.firstname;
                  posts[i].opLastName = user.lastname;
                  posts[i].opPhoto = user.photo;

                  // Add post images
                  const photos = await PhotoUpload.query()
                  .where('belongsTo', '=', posts[i].uuid)
                  .where('type', '=', 'post')
                  .fetch()

                  posts[i].photos = photos.rows

              }

              return posts


          } catch (error) {
              throw new Error('Missing or invalid jwt token')
          }
      },

这也是我的Angular查询：

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

Answer 1

您可以获取循环的索引，并检查索引是否等于零（第一次迭代）。如果是这样，请显示头像：

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

限制图像在NgFor循环中显示一次

1 个答案: