1

当我的 Angular 组件 HTML 呈现时。我会得到很多看起来像这样的错误

错误类型错误：无法读取未定义的属性（读取“someProperty”）

在我的 HTML 页面中，我有很多看起来像这样的绑定

<h1>{{event.title.toUpperCase()}}</h1>

在大多数组件中，我调用服务以从“ngOnInit()”中的控制器获取数据，并且我知道在数据从控制器返回之前防止此错误的一种解决方案是使属性可以像这样为空

event?.title

但这似乎不是一个实际的解决方案，特别是如果我在页面上有几十个。

我试过的 -

  1. 用“？”使它们可以为空 但这似乎不正确，特别是如果我总是这样做
  2. 将从控制器返回的对象类型设置为“任意”（例如事件：任意），但在某些情况下仍会显示错误

问题 - 处理此问题的最佳解决方案是什么，以便在我的页面数据加载之前我不会一直收到这些错误？

我应该有一些像 *ngIf="event" 这样的条件并隐藏页面直到收到数据并在等待时显示一些加载指示器？或者有什么方法可以防止这些错误显示在控制台中？

编辑 - 这是我用来从控制器获取数据并将其设置为“事件”的代码

// component
event: any;

// ngOnInit()
this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => {
  this.event = response;
}, error => {
  console.log(error);
});

// service
getEvent(id: number): Observable <any> {
  return this.http.get<any>(this.baseUrl + 'events/' + id);
}

4

2 回答 2

1

定义一个布尔变量并检查数据是否已加载是最好的方法：

// component
event: any;
loaded: boolean;


// ngOnInit()
this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => {
  this.event = response;
  this.loaded = true;
}, error => {
  console.log(error);
});

在您的 HTML 页面中，将您的 HTML 标记放在一个部分或 div 标记中，如下所示：

<section *ngIf="loaded">

// your HTML tags here

</section>

通过这种方式，您不会不断收到未定义的错误，并且只有在真正加载数据时才会发生绑定。而已！

于 2022-01-25T14:16:52.870 回答
0

我会将您受影响的 html 包装成类似

<ng-container *ngIf="event">
...
</ng-container>

在阅读您的描述时，我还建议使用作为您的 http-call 的 observable 作为模板中的异步绑定，而不是将其映射到具体对象“事件”。

为您提供更多相关信息，但您需要更多代码。[编辑] 你的 JS：

// class member
event$: Observable<any> = of(undefined);

// whereever
this.event$ = this.eventService.getEvent(this.id).pipe(take(1),
  catchError(error => {
    console.log(error);
    //or return something else
    return throwError(error);
  }));

在 HTML 中绑定：

<ng-container *ngIf="(event$ | async) as event">
...
</ng-container>

[/编辑]

于 2021-12-02T20:36:03.697 回答