如何避免使用TrackBy函數避免為nGFor重建DOM-Angular Firestore

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