Есть ли способ получить массив строк, который находится внутри коллекции в Firebase?

Question

Я создал сервис и интерфейс для моей сохраненной коллекции. В моих коллекциях есть 3 поля: id, title, tags [], которое представляет собой массив строк. Я использовал снимок коллекции, чтобы получить идентификатор, и метод, который я назвал getSaved, чтобы получить заголовок сохраненного файла. Как я могу получить элементы массива тегов, чтобы отобразить их в мой HTML-файл.

//saved interface
export interface Saved {
    id: string;
    title: string;
    tags: string[];
 }

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable'; 
import { AuthService } from './auth.service';
import { LoadingService } from './loading.service';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { AngularFireStorage } from '@angular/fire/storage';
import { Saved } from '../interfaces/Saved';
import { firestore } from 'firebase';


@Injectable({
  providedIn: 'root'
})
export class SavedService {

  savedCollections: AngularFirestoreCollection<Saved>;
  saved: Observable<any>;

  constructor(
    public db: AngularFirestore,
    private loadingService: LoadingService
  ) {
    // this.saved = this.db.collection('saved').valueChanges();
    // Use snapshot instead to have access to id
    this.saved = this.db.collection('saved').snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Saved;
        data.id = a.payload.doc.id;
        return data;
      })
    });



   }

   getSaved() {
    return this.saved;
  }


}

// saved.component.ts
import { Component, OnInit } from '@angular/core';

import { AuthService } from 'src/app/services/auth.service';
import { LoadingService } from 'src/app/services/loading.service';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Subscription } from 'rxjs/Subscription';


import { SavedService } from '../../services/saved.service';
import { Saved } from 'src/app/interfaces/Saved';


@Component({
  selector: 'app-savedchats',
  templateUrl: './savedchats.component.html',
  styleUrls: ['./savedchats.component.scss']
})
export class SavedchatsComponent implements OnInit {
  public saved: Saved[];
  private subscriptions: Subscription[] = [];

  constructor(

    // Adding saved service
    private savedService: SavedService,

    private auth: AuthService,
    private loadingService: LoadingService,
    private route: ActivatedRoute,
    private db: AngularFirestore
  ) {
    // this.loadingService.isLoading.next(true);

   }

  ngOnInit() {

    // Add elemetns from db using savedService
    this.savedService.getSaved().subscribe( saved => {
      this.saved = saved;
      console.log(saved); 
    });


   }
  }

Answer 1

Вы ищете что-то подобное?

this.saved = this.db.collection('saved').snapshotChanges().map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Saved;
    data.id = a.payload.doc.id;
    return data;
  });
}).sort((stra, strb) => (stra < strb ? -1 : 1));

Или внешний массив, подобный этому?

let list = [];
this.saved = this.db.collection('saved').snapshotChanges().map(changes => {
  return changes.map(a => {
    const data = a.payload.doc.data() as Saved;
    data.id = a.payload.doc.id;
    list.push(data.id).sort((stra, strb) => (stra < strb ? -1 : 1));
    return data;
  });
});