Question

我正在尝试构建一个投票应用。我已经使用* ngFor来循环查询数据以及每当我尝试添加或更新投票时。投票的价值会发生变化，但整个DOM正在重建（刷新）。如何避免重建整个DOM并更新投票值。我尝试使用trackBy函数。但它没有正常工作。

   ngOnInit() {
    this.postsCol=this.afs.collection('posts', ref => ref.where('postid', '==',this.id));
    this.posts = this.postsCol.valueChanges();
    this.posts = this.postsCol.snapshotChanges()
      .map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data() as Posts;
          const id = a.payload.doc.id;
          postId=id;
          return { id, data };
        });
      });
      this.pollsCol=this.afs.collection("posts").doc(this.id).collection("polls",ref => ref.orderBy('timestamp'));
      this.polls = this.pollsCol.valueChanges();
      this.polls = this.pollsCol.snapshotChanges()
      .map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data() as Polls;
          const id = a.payload.doc.id;
          pollId = id;
          return { id, data };
        });
      });
}

public trackByFn(poll){
  console.log("trackby"+poll);
  return poll;
}

  <div *ngFor="let poll of polls | async ; trackBy: trackByFn">
                  <div>

              <img [src]="poll.data.pollimage" class="mainpollimage">
              <br><br>
              <li><p class="mainpolltitle">{{ poll.data.polltitle}}</p>
              <p class="mainpollcontent">{{poll.data.pollcontent}}</p>
              <div class="votebox d-flex justify-content-start">
              <p class="mainpollvotes" ng-attr-id="{{poll.id}}" id="{{poll.id}}">{{poll.data.votes}} Votes</p>
              <div class="ml-auto" >
              <a    (click)="addVote(post.id,poll.id)" class="btn-floating btn-sm blue-gradient  ml-auto" ><i class="fa fa-star voteicon"></i></a>
              </div></div>
            </li>
            <br>
            <br>
            </div>
            </div>

如何在不刷新/重建DOM的情况下显示更新的值？感谢

Answer 1

由于在trackBy函数中，您将返回作为输入参数获取的对象，因此与ngFor的默认设置相同：比较对象引用。每当可观察对象被新值触发时，您将获得所有对象的新对象引用。您需要一些可以识别您的对象的东西。由于要映射到具有ID和数据属性的对象，因此可以使用对象的ID。此外，trackBy函数的方法签名带有2个参数：索引和数组本身的项。

public trackByFn(index, poll){
  return poll.id;
}

如何避免使用trackBy函数避免为nGFor重建DOM - Angular Firestore

1 个答案: