Firebase + 火焰链接 + 角度答案

【问题标题】：Firebase + flamelink + angularFirebase + 火焰链接 + 角度
【发布时间】：2018-09-17 17:21:34
【问题描述】：

我已经连接了 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 也会出现错误

【问题讨论】：

标签： angular firebase

【解决方案1】：

来自 AngularFire 的 documentation，最简单的使用方法是：

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() 返回的observable，然后自己完成功能。

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

只要值发生变化并更新this.item 属性，就会触发。

【讨论】：

【解决方案2】：

我无法让它与上面显示的设置一起使用。由于这只是一个演示，我删除了该项目并重新开始。对于其他为此苦苦挣扎的人，请参阅下面的设置。

然后在我的应用组件中

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

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

}

现在它正在工作！

【讨论】：