Как избежать Избегайте перестройки DOM для nG для использования функции trackBy - Angular Firestore

Question

Как избежать Избегайте перестройки DOM для nG для использования функции trackBy - Angular Firestore

1

Я пытаюсь создать приложение для опроса. Я использовал * 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? Спасибо

Anish Srinivasan 05 дек. 2017, в 22:05

Источник

Теги:

angular

javascript

dom

google-cloud-firestore

1 ответ

Ещё вопросы

Gerros · Answer 1 · 2019-03-29T07-29-00.000Z

Так как в вашей функции trackBy вы возвращаете объект, который вы получаете в качестве входного параметра, вы делаете то же самое, что и значение по умолчанию для ngFor: сравнение ссылки на объект. Всякий раз, когда наблюдаемое запускается с новыми значениями, вы получаете новые ссылки на объекты для всех ваших объектов. Вам нужно что-то, что идентифицирует ваш объект. Поскольку вы отображаете объекты с идентификаторами и свойствами данных, вы можете использовать идентификатор своих объектов. Кроме того, сигнатура метода функции trackBy имеет 2 параметра... индекс и элемент самого массива.

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