Один объект отображается несколько раз, когда число его лайков обновляется в угловой базе - PullRequest
Новая
       7

Один объект отображается несколько раз, когда число его лайков обновляется в угловой базе

0 голосов
/ 07 октября 2018

Я создаю систему «нравится / не нравится» для сообщений на моем сайте.Каждый раз, когда пользователь нажимает кнопку «Мне нравится», в базе данных обновляется количество лайков.Объект, хранящийся в базе данных, имеет URL-адрес изображения, категорию и количество лайков в качестве ключей.

Ниже приведен мой код для обновления: likedButton(img) - это функция, которая вызывается, когда пользователь нажимает кнопку.кнопка «Мне нравится». 

likedButton(img) {
  var url = img.src;
  var x = this.db
    .list('/userPosts', ref => ref.orderByChild('url').equalTo(url));

  x.snapshotChanges().first()
    .subscribe((datas) => {
      var keys = datas[0]['key'];
      var obj = x.valueChanges().first().subscribe((z) => {
        var n: number = z[0]['likes'];
        firebase.database().ref('/userPosts/' + keys).update({
          'likes': n + 1
        });
      });
    });
}

Если я нажимаю кнопку «Мне нравится», один пост отображается несколько раз в Angular 6.

Ниже представлена ​​моя функция отображения: 

constructor(
  public db: AngularFireDatabase, 
  private router: Router, 
  public authService: AuthService
) {

  db.list('/userPosts').valueChanges().subscribe(images => {
    Array.prototype.push.apply(this.image, images);
    this.image.reverse();
  });

  this.authService.af.auth.onAuthStateChanged((user) => {
    if (user != null) {
      this.logged = true;
      this.userName = user.displayName;
    }
  });
}

Это шаблон 

<ul class="images">
    <li *ngFor="let image of image | imagefilter : x "> 
        <img #img src="{{image.url}}" [ngStyle]="{'width':'26%','height':'26%'}" [className]="'img-thumbnail'">
        <button (click)="likedButton(img)" class="btn btn-primary">Like &nbsp;{{image.likes}}</button>
    </li>
</ul>
...