Question

@Injectable()

export class ArticlesService {
  items: FirebaseListObservable<any>;
  private _url = 'http://59176d8f5b63ed0011251710.mockapi.io/api/v1/articles';

  constructor(private _http: Http, db: AngularFireDatabase) {
    this.items = db.list('/');
  }

  getAllArticles(): Observable<any> {
    return this._http.get(this._url)
      .map((response: Response) => response.json())
      .catch((error) => Observable.throw(error.json()));
  }

  getAnArticle(articleId: string): Observable<any> {
    return this._http.get(`${this._url}/${articleId}`)
      .map((response: Response) => response.json())
      .catch((error) => Observable.throw(error.json()));
  }
}

位于两者中的.json对象，items对象和_url变量是相似的。但是，我需要将private _url变量替换为从Firebase对象中检索到的内容。我确定答案就在我面前，我似乎无法弄明白。

Answer 1

我发现您希望使用firebase数据库中的数据而不是模拟API。如果这就是你想要阅读的内容。

更新 ArticlesService 构造函数

constructor(
   private db: AngularFireDatabase
){}

将 getAllArticles() 更改为此

getAllArticles(): FirebaseListObservable<any[]> {
   return this.db.list('/');
}

您组件中的

constructor(
   private as: ArticlesService
){}

ngOnInit() { 
    this.as.getAllEvents()
      .subscribe(data => this.items = data);
}

稍后在模板中使用items重复*ngFor。（您不必在此方法中使用async管道）

适用于getAnArticle()

每个项目都有一个$key，它将具有该项目的唯一ID（它将是firebase在创建时设置的随机字符串）。在您的情况下，您可以使用id（articleId）代替$key。

将 getAnArticle() 更改为此

getAnArticle(articleId: string): FirebaseObjectObservable<any> {
    return this.db.object('/' + articleId);
}

将Firebase Observable List设置为typescript中的对象/变量

1 个答案: