Question

假设我从服务（例如，为我处理REST的服务）中的Angular组件的构造函数中读取了一些数据。

export class MyComponent
{
  public data : any;

  constructor (private ws : MyWebService)
  {
    this.ws.getData ().subscribe  // e.g. HTTP-request
    (
      (resp) => 
      {
        this.data = resp;
      }
    );
  }
}

模板将仅显示该数据。

<div>{{ data }}</div>

因为在呈现组件之前未加载数据，所以在第一次加载时，我的JavaScript控制台总是会出现未定义的错误。

为避免错误，我可以在显示之前检查数据。

  <div *ngIf="data!=undefined">{{ data }}</div>

另一种方法是初始化数据，并希望能够快速获取数据。

有没有更好的策略来避免此问题？

Answer 1

有很多策略：

执行{{ data?.memberOfData }}以确保成员的安全访问。
仅当数据不是<div *ngIf="data">{{ data }}</div>时才进行div渲染undefined
在加载数据时放置加载栏。您可以在HttpInterceptor中做到这一点，以使其在整个应用程序范围内，也可以仅在您正在处理的组件中进行。
使用解析保护，除非数据已加载，否则将阻止在router-outlet中加载组件。
您还可以使用async管道：

this.data$ = this.ws.getData();

然后在模板中：

<div> {{ data$ | async | json }} </div>

我个人喜欢上一个（第5个），因为我们不必关心unsubscribe中的Subscription和ngOnDestroy以避免任何内存泄漏。更干净了。

但这完全取决于您的特定用例。这样做没有什么好办法。

Angular：如何最好地处理init / loading问题

1 个答案: