Firebase + FlameLink + угловой

Question

Я подключил FireBase и FlameLink и добавил две схемы в FlameLink. блог и дом. Я пытаюсь управлять содержимым веб-сайта, поэтому нужен только доступ для чтения.

Я хотел бы прочитать данные в моем интерфейсе Angular 5.4.1, но здесь все становится нечетким. Из того, что я вижу, AngularFireList заменил FirebaseListObservable, но я не совсем понимаю, как мне его использовать.

import { Component } from '@angular/core';
import { AngularFireDatabase, 
     AngularFireList,
    } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  items: Observable<any[]>;

  constructor(public db:AngularFireDatabase){
    this.items = db.list('/flamelink/environments/production/content/blog/en-US/').valueChanges();
    console.log(this.items); 
  }
}

Это то, что регистрируется в консоли, я также получаю сообщение об ошибке, если я устанавливаю элементы для типа AngularFireList

Answer 1

Я не мог заставить это работать с настройкой, показанной выше. Поскольку это была просто демонстрация, я удалил проект и начал снова. Для всех, кто борется с этим, см. Настройку ниже.

Тогда в моем приложении компонент

export class AppComponent {
  bs: Observable<any[]>;
  posts = [];
  constructor(db: AngularFireDatabase) {
    this.bs = db.list(environment.baseURL).valueChanges();

    this.bs.subscribe(posts => {
      this.posts = posts;
    });
  }

}

Теперь это работает!

Answer 2

Из документации для AngularFire, самый простой способ использовать ее будет:

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

export interface Item { name: string; }

@Component({
  selector: 'app-root',
  template: `
    <div>
      {{ (item | async)?.name }}
    </div>
  `
})
export class AppComponent {
  private itemDoc: AngularFirestoreDocument<Item>;
  item: Observable<Item>;
  constructor(private afs: AngularFirestore) {
    this.itemDoc = afs.doc<Item>('items/1');
    this.item = this.itemDoc.valueChanges();
  }
  update(item: Item) {
    this.itemDoc.update(item);
  }
}

Другим способом было бы subscribe до наблюдаемой , которую valueChanges() возвращает и завершает работу самостоятельно.

this.itemDoc.valueChanges().subscribe((item) => this.item = item);

Срабатывает при изменении значения и обновляет свойство this.item.