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

Posted 2023-02-22

【中文标题】Angular 2：如果值存在，则显示 html

【英文标题】：Angular 2: If value exists show 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>

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

【讨论】：

如果我有要检查的号码怎么办。如果您正在检查字符串，上面的代码将起作用。

把数字转成字符串就可以了

【参考方案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>

参考：*NgIf API Documentation