行为主题正在控制台中加载数据，但模板在 angular 中变为空白

Question

我正在开发一个 angular 应用程序，我在其中订阅服务中的数据并使用 component.html 中的 Subject 发送数据，在 component.ts 中我订阅以获取最新值。

我的问题是，当我刷新页面时，我在控制台中获得了数据，但我没有在模板中看到它。另外，当我再次点击路由器 link 时，我可以看到第一次点击后的数据。

service.ts

  public_Data= new BehaviorSubject<any>(null);
  getDemo2(){
    this.http.get<UPost[]>(`https://write-your-heart-out-b338b.firebaseio.com/post/${this.uid}/public.json`)
    .pipe(
      map(responseData => {
        const postsArray: UPost[] = [];
        for (const key in responseData) {
          if (responseData.hasOwnProperty(key)) {
            postsArray.push({ ...responseData[key] });
          }
        }
        return postsArray;
      })
    )
    .subscribe(posts => {
      this.public_Data.next(posts)


      this.combine()
    });
  }

component.ts

 allpost: UPost[] = [];
  constructor(  private acrud: ACrudService) { }

  ngOnInit(): void {
    //this.acrud.getAllData()

    this.acrud.getDemo1();
    this.acrud.getDemo2()
    console.log("oninitnt methid")


   this.allSub= this.acrud.public_Data.subscribe(d=>{
      console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$",d)
    })

component.html

 <div class="card row" *ngFor="let i of allpost  ; let c = index">
      <div class="col-md-9 col-xs-9 main-content">
        <h2 class="title">{{ i.title }}</h2>
        <p>{{ i.description }}</p>
</div>
</div>

Answer 1

这里的大问题是您没有被动地处理数据。解决问题的最简单方法是将组件构造函数更改为以下内容：

  constructor(  public acrud: ACrudService) { }

然后将您的 HTML 更改为以下内容：

<div class="card row" *ngFor="let i of acrud.public_Data | async; let c = index">
      <div class="col-md-9 col-xs-9 main-content">
        <h2 class="title">{{ i.title }}</h2>
        <p>{{ i.description }}</p>
</div>
</div>

行为主题正在控制台中加载数据，但模板在 angular 中变为空白

Behaviour Subject is loading data in console but template is coming blank in angular

javascript

angular

typescript

observable

angular2-services