Question

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

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

我查看的所有来源都表明，如果我需要立即加载数据库的正确方法是使用ngOnInit()挂钩，这就是为什么我不打算在某些时候调用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的建议实施getData() setTimeout()

  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)
);

}

Answer 2

因为在subscribe函数中你得到一个可观察对象（而不是数组）。

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

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

Answer 3

尝试使用HTML

<h1 *ngIf="datum !== null && datum !== undefined && datum !== ''">
Welcome to {{title}}!!
Data: {{datum | json}}
</h1>

您的基准变量是绑定双向数据绑定。当数据不等于null或未定义或空白时，该时间显示该HTML标记。

希望对你有所帮助。

在onInit生命周期钩子

3 个答案: