Angular 4 Ngif 指令如何使用答案

【问题标题】：Angular 4 Ngif directive how to useAngular 4 Ngif 指令如何使用
【发布时间】：2017-07-27 09:00:55
【问题描述】：

我想知道当我必须显示一些来自 http 调用的文本/表单时，为什么我必须使用这个指令 <div *ngIf="show">Text to show</div>。我知道如果我不使用它，角度会给我一些错误，例如：

var a 未定义

因为当我显示 html 时，绑定的变量不包含任何值。但这是最佳实践吗？当我们遇到这种情况时总是有必要的吗？有没有更好的方法来做到这一点？

【问题讨论】：

这解释得很好，并提到了 ngIf 以及使用安全导航运算符 vs ngIf 的“利弊”。 angular.io/guide/…
您不一定需要使用ngIf 处理它，您只需要确保您的组件可以处理这样一个事实，即在 HTTP 调用完成之前该值不会存在.例如，如果您的组件上的 this.text 在 HTTP 调用后被设置，而不是未定义，您可以将其设置为空字符串或其他一些默认值。
所以如果我不想初始化我需要 ngIf 的每个对象？ @JoeClay

【解决方案1】：

您可以使用您在 HTML 模板中绑定的一些初始默认值来定义变量。参考官方文档https://angular.io/api/common/NgIf。如果您有任何进一步的疑问，请告诉我。

【讨论】：

【解决方案2】：

当 HTML 在页面上加载时，Text to show 的值将未定义，因为 HTTP 调用可能不会返回响应供您设置它。

当 HTTP 调用返回时，然后您设置您的 Text to show，它不再是未定义的并且可以在 HTML 中显示。

所以这里有两种选择：

将Text to show 设置为默认值，如果您愿意，甚至可以设置为“”。当 HTTP 调用返回时，然后覆盖这个值，角度绑定会更新视图。
使用 *ngIf 指令，告诉 Angular 不要渲染该 HTML（因此不需要那些未定义的变量）。如果页面上有多个依赖于 HTTP 调用的变量，这很有用。一旦调用都返回了您需要的数据并设置了所有变量，您可以将变量 show 设置为 true，从而允许呈现 HTML 并显示变量。

我通常会得到一个 showPage 变量和一个 <div *ngIf="showPage"></div> 页面 html 上的包装器。当我拥有页面所需的所有数据后，我将 showPage 设置为 true。

【讨论】：

【解决方案3】：

ngif 表达式结果值不仅仅是布尔值 true 或 false

但将改为您可能希望轻松引用的对象值。

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

典型用法：如果'things'存在，则显示'there is things'。如果“事物”未定义。什么都不显示。 'things' 可以是布尔值 true/false，'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! -->

【讨论】：