异步函数在onInit生命周期钩子中调用时无法按预期工作

在我的项目中，我有一个服务，应用程序启动时应该加载本地数据库。为此，使用功能GetData()。我尝试通过拨打ngOnInit()生命周期挂钩来使用它。它将结果记录在控制台中，但属性datum看起来没有改变。异步函数在onInit生命周期钩子中调用时无法按预期工作

但是，如果我将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>

应用加载

按钮点击

编辑实施getData()与setTimeout()由AlexKhymenko

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

来源

2017-09-13 Ivan Bespalov

我会使用getter来处理这种情况：'get Datum（）{return this.datum; };在视图中：'Data：{{Datum}}'。数据不显示可能有几个原因：zone.js不会触发，或者是其他。你也可以尝试使用'Zone.run'，但它应该已经被getter修复了。此外，始终初始化一个类属性，如果理论上需要在视图中显示，请不要将其保留为未定义。 NgZone参考资料：https：//angular.io/api/core/NGZone。或者，直接绑定到dom中的getData，并返回observable，然后添加|异步 – briosheje

我真的不明白。 '吸气'的目的和吸引力是什么？它只是一个返回'datum'的函数吗？什么时候该被叫？ –

@briosheje可能直接绑定到'getData（）'是解决方案，因为我使用'datum'只是因为我没有完全掌握observables的概念。我该怎么做？它应该看起来像{{searchService.getData（）？ | async}}？ –

的建议因为在订阅功能，你会得到一个观察的对象（不是数组）。

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'; 
}

来源

2017-09-13 05:30:53 Manfice

删除括号只会改变我分配给“datum '。如果我离开括号，则为与单个对象相对的一组对象。 –

在HTML尝试

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

你的数据变量被绑定双向数据绑定。当datum不等于null或未定义或空白时显示该HTML标记。

希望对你有所帮助。

来源

2017-09-13 05:35:36

变化不大。在启动时只有按钮被显示。只有当按钮被点击时，其他所有内容才会出现。 –

你改变了html代码，仍然无法正常工作？ –

仍然是相同的行为，除了在应用程序启动时只有Click Me按钮显示为 –

您需要做的是手动运行更改检测，例如通过调用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) 
); 

}

来源

2017-09-13 05:58:57 alexKhymenko

要么我做错了什么，或者这没有帮助。在实现了你的建议之后，我在控制台中得到的第一个结果是“未定义”，并且DOM中没有显示任何内容。点击按钮后，控制台中的结果logget是正确的，并且信息出现在DOM –

给我5分钟将创建plunker – alexKhymenko

@IvanBespalov更新。它会在2秒后加载日期。 – alexKhymenko

异步函数在onInit生命周期钩子中调用时无法按预期工作

回答

相关问题