javascript - 在 onInit 生命周期钩子(Hook)上调用时，异步函数无法按预期工作

Question

在我的项目中，我有一个服务应该在应用程序启动时加载本地数据库。为此，使用了函数 GetData()。我尝试通过调用 ngOnInit() 生命周期 Hook 来使用它。它将结果记录在控制台中，但属性 datum 似乎没有变化。

但是，如果我将 GetData() 方法添加到按钮，属性会更改并且数据会按预期显示在控制台中。

我查看的所有资源都表明，如果我需要它，加载数据库的正确方法是使用 ngOnInit() Hook ，这就是为什么我不想调用 GetData() 当来自 DOM 的某个事件被触发时。

组件

export class AppComponent implements OnInit {
  datum;
  constructor(private searchService: SearchService){ }
  getData(){
    this.searchService.getData().subscribe(
      data => {
        this.datum = data[0];
        console.log(this.datum);},
      err => console.log("E", err)
    );
  }

  ngOnInit(){
    this.getData();
  }
  title = 'app';
}

HTML

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
    Data: {{datum | json}}
  </h1>
  <button (click)="getData()">Click Me</button>

应用已加载

点击按钮

编辑 按照 AlexKhymenko 的建议，使用 setTimeout() 实现 getData()

  getData(){
    this.searchService.getData().subscribe(
      data => {
        setTimeout(() =>{
          this.datum = data[0];
        });
        console.log(this.datum);},
      err => console.log("E", err)
    );
  }

Answer 1

您需要做的是手动运行更改检测，例如通过调用 setTimeout。我创建了 a Plunker .

export class AppComponent implements OnInit {
  datum;
  title = 'app';

  constructor(private searchService: SearchService){ }
       }

 ngOnInit(){
   this.getData();
 }
  getData(){
      this.searchService.getData().subscribe(
  data => {
   setTimeout(() => {
            this.datum = data[0];
   })
    console.log(this.datum);},
  err => console.log("E", err)
);

}