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

Question

[我正在开发一个有角度的应用程序，在该应用程序中，我在component.html中订阅服务中的数据并使用Subject发出数据，在component.ts中，我订阅以获取最新的值。

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

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>