【问题标题】：Angular 2: If value exists show htmlAngular 2：如果值存在，则显示 html
【发布时间】：2016-09-26 18:35:54
【问题描述】：

目前，我有一项服务可以从我编写的许多 API 中提取值。在模板中，如果值存在或在结果中不为空，我希望只输出以下 html：

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

所以我想弄清楚如何将它包装在 ngIf 中，或者是否有其他方法可以做到这一点，以便这个“li”项目只有在该值存在且不为空的情况下才会得到输出

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

Angular 4+

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

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

这样您就不必重复条件，如果表达式很长或包含您希望避免多次调用的方法调用，这将很有用。

应用于问题中的代码sn-p：

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

【讨论】：