代码之家 › 专栏 › 技术社区 › nontechguy

Firebase+flamelink+angular

firebase angular

nontechguy · 技术社区 · 6 年前

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); 
  }
}

这就是控制台中记录的内容,如果我将items设置为type AngularFireList,也会出现错误

2 回复 | 直到 6 年前

Agney Sidharth yadav 6 年前

从 documentation 对于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 到 observable 那个 valueChanges() 返回并自己完成功能。

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

这将在值发生更改时触发并更新 this.item 财产。

nontechguy 6 年前

然后在我的应用程序组件中

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

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

}

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前