Angular Observable 的数据绑定答案

【问题标题】：Data binding with Angular ObservablesAngular Observable 的数据绑定
【发布时间】：2020-10-28 04:22:11
【问题描述】：

最初，数据不是从 API 调用中检索到的，因此控制台会抛出以下内容：

Cannot read property 'whatever' of undefined

这是可以理解的，一旦检索到数据，它就会显示正确的值。解决控制台错误的最佳方法是什么？一定有什么。

在我的html中，我基本上有这个：

<div>{{data.whatever}}</div>

我正在通过这样的服务调用 API：

this.dataService.getData().subscribe(results => {
    this.data = results;
});

【问题讨论】：

也分享你的代码。
已编辑以包含相关代码。
对于一个简单的解决方法，只需尝试{{data?.whatever}}，但更好的解决方案是定义、分配和初始化接口。
实际上，这对我的目的有用。如果数据未定义，我无论如何都不会显示它。谢谢。

标签： angular observable

【解决方案1】：

您只需使用the-safe-navigation-operator 检查该值是否未定义 {{data?.whatever}}

【讨论】：

【解决方案2】：

您可以这样做来避免控制台错误

<div *ngIF="data">{{data.whatever}}</div>

并且还在 ngOnInit() 上调用您的 API 服务 以获得正确的结果：

this.dataService.getData().subscribe(results => {
    this.data = results;
});

【讨论】：

我在ngOnInit中调用API服务，但是在promise被处理之前，数据仍然是未定义的，这就是错误的来源。
在你的代码中尝试这个以避免错误
{{data.whatever}}

【解决方案3】：

我不确定我是否正确理解了您的问题，但如果您的意思是在从数据库中检索数据时要显示某些内容，那么请在您的 HTML 文件中：

<p *ngIf= "this.dbService.isLoading && !this.dbService.error">Loading...</p>

在您的数据库服务中，具有 isLoading 和 error 属性，以便您可以跟踪它所处的状态。

public whatevers: Whatever[] = [];


public isLoading = true;
  public error = null;


public load() {
this.isLoading = true;
this.fetchWhatever().subscribe( (loadedItems) => {
  this.isLoading = false;
  this.whatevers = loadedItems;
},
(error) => {
  this.error = error.message;
},
);

}

【讨论】：

【解决方案4】：

你必须调用body api

    this.dataService.getData().subscribe(results => {
        if(results.status==200)
          {
                 this.data = results.body;
          }
     },
     error=>{
       console.log("Error");
     }
   );

并使用您的 html 代码

<div *ngIF="data">{{data.whatever}}</div>

【讨论】：