Angular 2：如果值存在则显示html

Question

目前，我有一项服务可以从我编写的许多API中获取值。在模板中，我希望只有当值存在时才输出以下html，或者当它们被送到模板时结果中不为空：

<li class="title rh-blue-lite-fg">{{ project.meta_header_one }}</li>

所以我试图找出如何在ngIf中包装它或者是否有其他方法来执行此操作，以便只有当该值存在且不为空时才会输出此“li”项

Answer 1

我认为您可以使用ngIF指令检查项目是否为null：

<li class="title rh-blue-lite-fg" *ngIf="project.meta_header_one">{{ project.meta_header_one }}</li>

参考： https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

Answer 2

Angular 4 +

使用Angular 4或更高版本（至少高达Angular 6 ），您可以使用*ngIf和as关键字将条件值存储在如下变量中：

<div *ngIf="condition as value">{{value}}</div>

这样你就不必重复这个条件，如果表达式很长或者你想要避免多次调用的方法调用，这个条件就很有用。

应用于问题的代码段：

<li class="title rh-blue-lite-fg" *ngIf="project.meta_header_one as value">{{value}}</li>

参考：*NgIf API Documentation