在我从 controller 接收数据之前，如何在我的 Angular 应用程序中处理来自 html 的未定义属性？

Question

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

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

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

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

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

event?.title

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

我试过的 -

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

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

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

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

 // 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); }

Answer 1

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

// 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>

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

Answer 2

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

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

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

为您提供更多相关信息，但您需要更多代码。