Angular技术问询：如何用*ngIf根据输入值乘2结果小于122显示div

嘿，这个需求用Angular自带的结构型指令就能轻松搞定，我来给你拆解一下：

你只需要在想要控制显示的<div>上添加*ngIf指令，传入判断条件——也就是计算后的结果小于122即可。

修改后的完整代码 #

<input type="number" [(ngModel)]="valueInitial"> 
<div>Result: {{ valueInitial * 2 }}</div>
<!-- 条件显示的div -->
<div *ngIf="valueInitial * 2 < 122">
  这里是结果小于122时才会显示的内容！
</div>

额外优化建议 #

如果担心用户还没输入数值时（此时valueInitial是undefined，计算后得到NaN）出现意外，可以给条件加个非空校验，确保只有输入有效数值时才会判断：

<div *ngIf="valueInitial !== undefined && valueInitial * 2 < 122">
  这里是结果小于122时才会显示的内容！
</div>

这样当用户还没输入任何内容时，这个div不会随便显示，逻辑更严谨。

原理说明 #

Angular的*ngIf是结构型指令，它会根据表达式的布尔结果决定是否渲染整个DOM元素（不是简单的隐藏，而是直接不生成该元素），性能和逻辑上都比用CSS隐藏更靠谱。

内容的提问来源于stack exchange，提问作者Paco Zevallos