Angular 4 Ngif指令如何使用

我想知道当我必须显示来自http调用的一些文本/表单时，为什么我必须使用这个指令

文本来显示

。 我知道如果我不使用它，会给我一些错误，比如：

变量a未定义

因为当我显示html时，变量bind不包含任何值。 但这是最佳实践吗？当我们遇到这样的情况时，总是有必要的吗？

---

还有更好的方法吗？

您可以使用HTML模板中绑定的一些初始默认值来定义变量。请参阅官方文件。如果您有任何进一步的查询，请告诉我。

当HTML加载到页面上时，要显示的

文本的值将是未定义的，因为HTTP调用可能不会为您返回设置它的响应

当HTTP调用返回时，然后将
文本设置为show
它不再是未定义的，可以用HTML显示

因此，这里有两种选择：

将要显示的
文本设置为默认值，即使您愿意也可以设置为“”。当HTTP调用返回时，覆盖该值，角度绑定将更新视图

使用*ngIf指令，告诉angular不要呈现HTML（因此不需要那些未定义的变量）。如果一个页面上有多个依赖HTTP调用的变量，这将非常有用。调用全部返回所需的数据并设置所有变量后，可以将变量
show
设置为true，从而允许HTML呈现并显示变量

官方文件如下：

我通常会得到一个
showPage
变量和一个
页面的html包装。
当我有了页面所需的所有数据后，我将
showPage
设置为true。
ngif表达式的结果值不仅仅是布尔值true或false

而是一个您可能希望轻松引用的对象值

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

典型用法：如果“事物”存在，则显示“存在事物”。如果“事物”未定义。什么也不显示。”“things”可以是布尔真/假，“things”可以是任何其他类型，可以只是对象的一个变量

<div *ngIf="things">
     there is things
 </div>


有些事情

例如：

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->


好车！
打电话给优步。

例如：

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->


漂亮的车！


这很好地解释了ngIf以及使用安全导航操作员与ngIf的“优缺点”。您不需要使用
ngIf
来处理它，您只需要确保您的组件能够处理这样一个事实，即在HTTP调用完成之前，值不会出现在那里。例如，如果在HTTP调用后设置了组件上的.text，而不是将其保留为未定义，则可以将其设置为空字符串或其他默认值。因此，如果我不想初始化所有需要ngIf的对象，那么@乔克雷