Angular Firestore (angularfire2) - извлеките все «комментарии», которые соответствуют идентификатору «фото» - PullRequest
Новая
       31

Angular Firestore (angularfire2) - извлеките все «комментарии», которые соответствуют идентификатору «фото»

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

Не знаю, как правильно «спросить» об этом.Я думаю, что в MySQL это называлось «Присоединение» или что-то в этом роде.

У меня есть коллекция под названием «Фото».Я хочу добавить возможность добавления комментариев к фотографии.Эти «Комментарии» будут храниться в другой коллекции.Структура комментария выглядит следующим образом:

  • комментарий (строка)
  • дата (строка - когда это было опубликовано)
  • photoId (идентификатор фотографии)этот комментарий принадлежит).

У меня есть угловая страница, на которой уже отображается информация о фотографии.Теперь я хочу отобразить комментарии к этой фотографии.Как я могу получить только те комментарии, которые принадлежат этой фотографии ??

Кроме того, я хочу, чтобы это был asyc, потому что у меня будет возможность добавлять новый комментарий "на лету".

Большое спасибо!

1 Ответ

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

Вы можете просто запросить вашу коллекцию comments следующим образом: 

...
constructor(private afs: AngularFirestore) { 
    afs.collection('comments', ref => ref.where('photoId','==', this.idOfPhotoYouAreDisplaying)).valueChanges()
}
...

, если вы хотите проверить null в шаблоне, вы можете присвоить результат переменной (например, comments): 

comments: Comment[];
comments$: Observable<Comment[]>;

constructor(private db: AngularFirestore) { 

    this.comments$ = this.db.collection(config.collection_comments, ref => ref.where('photoId', '==', this.photoId))
        .snapshotChanges()
        .pipe(
            map(actions => {
                return actions.map(a => {
                    const data = a.payload.doc.data() as Comment;
                    const id = a.payload.doc.id;
                    return { id, ...data };
                });
            }));
}

ngOnInit() {
    this.comments$.subscribe(c => this.comments == c);
}

Теперь в вашем шаблоне вы можете проверить comments: 

<div *ngIf="comments">
    <div *ngFor="let comment of comments">
        ...
    </div>
</div>

Примечание 1: Вам не нужно назначать егопеременная.Вы можете проверить с помощью канала async в ngIf, но когда вы зациклите свои комментарии, снова с помощью async вы создадите вторую подписку, что приведет к тому, что ваш запрос будет выполнен дважды.

Примечание 2: Использование канала async обрабатывает отмену подписки вашего наблюдаемого.При подписке в компоненте вы должны справиться с этим самостоятельно.(Несколько способов сделать это)

...