Получить один объект Firebase Angular - PullRequest
Новая
       15

Получить один объект Firebase Angular

0 голосов
/ 16 ноября 2018

Я работаю над этим приложением, но у меня возникают проблемы с получением всей информации об объекте.

У меня есть «новостная» страница, на которой будут отображаться все списки из БД, она работает нормально, когда вы нажимаете на новости, вы переходите на страницу «Подробности», я могу выполнить маршрутизацию, нет проблем.

Проблема в том, что я не могу получить данные из Firebase. Что я делаю не так?

Спасибо

Компонент: 

import { ActivatedRoute, Params, Router } from '@angular/router';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NewsService } from '../news.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class NewsDisplayComponent implements OnInit {
  @ViewChild('closeBtn') closeBtn: ElementRef;
  id;

  news: Observable<any>;

  constructor(private db: AngularFireDatabase, private route: ActivatedRoute, private newsService: NewsService, private router: Router) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    this.news = this.newsService.getSingleNews(this.id).valueChanges();
    console.log(this.news);
  }

  closeModal() {
    this.router.navigate(['/news']);
    this.closeBtn.nativeElement.click();
  }

}

Service.ts 

import { map } from 'rxjs/operators';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { News } from './news.model';
import { Injectable } from '@angular/core';

@Injectable()
export class NewsService {
    news: AngularFireList<News[]>;
    constructor(private db: AngularFireDatabase) {
    }
    getNews() {
        this.news = this.db.list('news');
        return this.news.valueChanges();
    }

    getSingleNews(id: string) {
        return this.db.object('news' + id);
    }
}

HTML 

<div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">{{ id }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" #closeBtn (click)="closeModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h1>{{ news.title | async }}</h1>
        <h2>{{ news.subtitle | async }}</h2>
        <p>{{ news.article | async}}</p>
      </div>
    </div>
</div>

1 Ответ

0 голосов
/ 16 ноября 2018

Попробуй так:

Компонент 

this.newsService.getSingleNews(this.id).subscribe(news => {
    this.news = news
});

Service.ts

Похоже, вам не хватает слеша после новостей. 

getSingleNews(id: string) {
    return this.db.object('news/' + id);
}

Обновление:

Изменить свойство news: Observable<any> на объект. Если вы делаете это так, как я вам показывал, это уже не заметно.

...