角常春藤，模板局部变量错误：对象可能为"空"

Question

我收到消息错误："对象可能是'空'"。 在modal.customWidth.extra_large行中

我的代码是：

<app-modal
#modal
[active]="hasCurrentProduct$ | async"
[modalWidth]="modal.customWidth.extra_large">

Answer 1

在访问其属性之前，您需要检查modal和customWidth是否为空。

将modal.customWidth.extra_large更改为modal?.customWidth?.extra_large

Answer 2

有一个与此相关的选项strictNullInputTypes(用于输入属性(。

它已经得到了一些修复 https://github.com/angular/angular/issues/32051

但是我在某些情况下想出了这个：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'default'
})
export class DefaultValuePipe implements PipeTransform {
constructor() {}
transform<T>(value: T | null | undefined, defaultValue: T): T {
return value ?? defaultValue;
}
}

然后您只需将其添加到async之后

[active]="hasCurrentProduct$ | async | default: false"

让事情变得非常清楚，没有这些废话：

[active]="(hasCurrentProduct$ | async) ?? false"

在这个例子中，TBH 实际上大致相同 - 但更复杂的表达式可以受益。

<div [style.width.em]="(catsCount$ | async | default: 1) * 30"></div>

You own {{ (cats$ | async | default: []).length }} cats