(Angularfire) Получить конкретные данные из базы данных Firebase с идентификатором

Question

Я пытаюсь создать «блог» с angular и firebase.У меня все хорошо для моего первого проекта с Angular и Firebase.

Я сделал титульную страницу, где загружены все записи, а затем добавил гиперссылку "читать дальше ..." на маршрут конкретной статьи.плюс идентификатор записи.Вот HTML:

<div style="background-color:white" class=" contenedorBlog">

    <h1 style="padding-top:100px;" class="text-center mb-4">Pizarrón</h1>

    <div *ngFor="let item of items" style="padding:40px" class="rounded">
      <h2> {{item.title}} </h2>
      <p>Date: {{ item.systemDate }}</p>
      <div class="content" [innerHTML]="item.content"></div>
      <a [routerLink]="['/article', item.id]">Read more...</a>
    </div>

  </div>

А вот HTML-код компонента статьи:

<div style="background-color:white" class=" contenedorBlog">

    <div style="padding:40px" class="rounded">
      <h2> {{items.title}} </h2>
      <p>Fecha: {{ items.systemDate }}</p>
      <div class="content" [innerHTML]="items.content"></div>
    </div>

  </div>

Я пытаюсь выяснить, как я могу вызвать конкретный объект, имеющий идентификатор наroute (article /: id).

это то, что у меня есть (article.component.ts)

export class ArticlesComponent implements OnInit {

   items:any;

   constructor(private blogService: UploadService, private route: ActivatedRoute) {
      this.route.params.subscribe(params=> {
      this.items=this.blogService.getObjectById(params['id']);
   });
   }

   ngOnInit() {
   }

}

Проблема в том ... я не знаю, что делатьследующий.Я вызываю функцию, а не службу, которую я хочу получить ТОЛЬКО для объекта, который содержит идентификатор, который находится на маршруте.

getObjectById(id) {
    ///Help
}

Большое спасибо и извините за мой не очень хороший английский.

Answer 1

Изменить:

this.items=this.blogService.getObjectById(params['id']);

на:

this.blogService.getObjectById(params['id']).subscribe( i => {
        this.items = i;
    })

Их в getObjectById (id):

getObjectById(id) { 
     return this.afs.collection('collectionName').doc(id).valueChanges()
}

Если вы хотите только один раз, используйте значение".take (1)" перед ".subscribe"

Также вам нужно поместить * ngIf = "items" в элемент, где вы отображаете "items", если вы не хотите видеть "undefined"ошибка.

Answer 2

Определите переменную AngularFirestore в своем конструкторе, затем используйте ее в своей функции следующим образом:

constructor(private afs: AngularFirestore){
  this.route.params.subscribe(params=> {
    this.getObjectById(params['id']);
  });
}

getObjectById(id) {
    return this.afs.collection('collection_name')
      .doc(id)
      .ref;
}

И тогда вы можете использовать функцию для вашего компонента, например:

this.blogService.getObjectById(params['id']).get().then(res => {
    console.log(res)
})