代码之家 › 专栏 › 技术社区 › chris01

角度:如何最好地处理初始化/加载问题

angular

chris01 · 技术社区 · 6 年前

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>

另一种方法是初始化数据,并希望获取很快。

有没有更好的策略来避免这个问题?

1 回复 | 直到 6 年前

SiddAjmera 6 年前

有很多策略:

做 {{ data?.memberOfData }}
做 <div *ngIf="data">{{ data }}</div> div 仅当数据不可用时 undefined
加载数据时放置加载条。您可以在HttpInterceptor中这样做,使其应用程序范围更广,或者只在您正在处理的组件中这样做。
使用resolve guard防止组件加载到 router-outlet
你也可以使用 async 管道:

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

然后在模板中:

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

我个人喜欢最后一个(第五个),因为我们不必关心 unsubscribe Subscription 在里面 ngOnDestroy

不过,这完全取决于您的特定用例。做这件事没有好办法,也没有坏办法。

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前