*ngIf 在 TypeScript 代码中等效

Question

如何检查组件属性在 TypeScript 代码中是否未定义，例如在方法中？

在 .html 组件模板中，可以执行此类检查作为显示 html 元素的条件。避免在它们不存在或尚未初始化时显示。

<div *ngIf="exampleComponentProperty"></div>

是否可以在 .ts 中进行相同的检查？那么表达式会怎样？

if (this.exampleComponentProperty != null) {
// some code...
}

似乎没有用。

Answer 1

你可以简单地写

if (this.exampleComponentProperty) {
// some code...
}

或者

if (this.exampleComponentProperty != undefined) {
// some code...
}

Answer 2

如果此属性是显示此组件所必需的，您应该将其加载到解析器中。 https://angular.io/guide/router#resolve-pre-fetching-component-data

Answer 3

您可以尝试避免所有可能性的条件：

在 TS 中：

if (this.exampleComponentProperty && this.exampleComponentProperty != undefined && this.exampleComponentProperty != null) {
    // write code...
}

在HTML中：

 <div *ngIf="exampleComponentProperty && exampleComponentProperty != undefined && exampleComponentProperty != null"></div>

*ngIf equivalent in TypeScript code