Angular 应用程序以角度加载时未显示的项目列表

我是Angular和Firebase的新手，我正在学习一个教程，我创建了一个帖子列表，我有一个服务可以检索完整的列表，然后显示它。

我的问题是，每次我打开应用程序时，帖子列表都是空的，但当我添加一个新帖子时，它就在那里

这里是

邮政服务

：

import {Injectable} from "@angular/core";
import {Post} from "../models/post.model";
import {Subject} from "rxjs/Subject";
import * as firebase from 'firebase';
import DataSnapshot = firebase.database.DataSnapshot;

@Injectable()
export class PostService {

  posts: Post[] = [];
  postsSubject = new Subject<Post[]>();

  emitPosts() {
    this.postsSubject.next(this.posts);
  }

  savePosts() {
    firebase.database().ref('/posts').set(this.posts);
  }

  getPosts() {
    firebase.database().ref('/posts')
      .on('value', (data: DataSnapshot) => {
        this.posts = data.val() ? data.val() : [];
      });
  }
}

---

问题来自于操作的异步性。您需要修改

getPosts（）

方法以通知组件已检索帖子列表：

getPosts() { 
  firebase.database().ref('/posts') 
    .on('value', (data: DataSnapshot) => { 
      this.posts = data.val() ? data.val() : []; 
      this.emitPosts(); 
    }); 
}

组件的

ngOnInit（）

方法需要向firebase发送请求以检索该列表：

ngOnInit() { 
  this.postsSubscription = this.postService.postsSubject.subscribe( 
    (posts: Post[]) => { 
      this.posts = posts; 
    } 
  ); 
  this.postService.getPosts(); 
}

---

初始列表是否来自

getPosts（）

？如果是这样，我看不到它在你的代码中的任何地方调用这是我的问题。。。在教程中，他没有调用它，在

this.postService.emitPosts（）

之前，您可以尝试调用

ngOnInit

中的

this.postService.getPosts（）

。还有，你有本教程的链接吗？问题是这门课程是法语的：嗯，好的，试试看调用

getPosts

是否会改变事情

ngOnInit() { 
  this.postsSubscription = this.postService.postsSubject.subscribe( 
    (posts: Post[]) => { 
      this.posts = posts; 
    } 
  ); 
  this.postService.getPosts(); 
}