NgIflink

说明link

ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively. Typically the:

ngIf 会对 expression 进行求值，如果为真，则在原地渲染 then 模板，否则渲染 else 模板。通常：

• then template is the inline template of ngIf unless bound to a different value.

  then 模板就是 ngIf 中内联的模板 —— 除非你指定了另一个值。

• else template is blank unless it is bound.

  else 模板是空白的 —— 除非你另行指定了。

Most common usagelink

常见用法link

The most common usage of the ngIf directive is to conditionally show the inline template as seen in this example:

ngIf 指令最常见的用法是根据条件显示其内联模板，比如：

Showing an alternative template using elselink

通过 else 显示另一个模板link

If it is necessary to display a template when the expression is falsy use the else template binding as shown. Note that the else binding points to a <ng-template> labeled #elseBlock. The template can be defined anywhere in the component view but is typically placed right after ngIf for readability.

如果 expression 为假时有必要显示一个模板，就可以用上述的 else 模板来进行绑定。 注意，else 绑定指向的是一个带有 #elseBlock 标签的 <ng-template> 元素。 该模板可以定义在此组件视图中的任何地方，但为了提高可读性，通常会放在 ngIf 的紧下方。

Using non-inlined then templatelink

使用非内联的 then 模板link

Usually the then template is the inlined template of the ngIf, but it can be changed using a binding (just like else). Because then and else are bindings, the template references can change at runtime as shown in this example.

通常，then 模板就是 ngIf 的内联模板，不过你也可以通过绑定机制（就像 else 那样）来修改它。 因为 then 和 else 都是绑定，因此可以在运行期间改变这个模板引用 —— 如下例所示。

Storing conditional result in a variablelink

把条件结果保存在变量中link

A common pattern is that we need to show a set of properties from the same object. If the object is undefined, then we have to use the safe-traversal-operator ?. to guard against dereferencing a null value. This is especially the case when waiting on async data such as when using the async pipe as shown in following example:

一种常见的需求模式为：我们要显示来自同一个对象的一组属性。如果该对象是 undefined，那么我们就不得不使用安全遍历操作符 ?. 来防止引用到空对象。 尤其是在使用 async 管道等待异步数据时，例如：

There are several inefficiencies in the above example:

上面这个例子中有一系列低效代码：

• We create multiple subscriptions on userStream. One for each async pipe, or two in the example above.

  我们在 userStream 上创建了多个订阅。每个 async 管道都有一个，比如上面这个例子中就用了两个。

• We cannot display an alternative screen while waiting for the data to arrive asynchronously.

  在等待异步数据到来的时候，我们没法显示一个备用视图（如 loading）。

• We have to use the safe-traversal-operator ?. to access properties, which is cumbersome.

  我们不得不使用安全遍历操作符 ?. 来访问属性，太繁琐了。

• We have to place the async pipe in parenthesis.

  我们不得不把 async 管道放进圆括号里。

A better way to do this is to use ngIf and store the result of the condition in a local variable as shown in the the example below:

更好的方式是使用 ngIf，并把该条件的结果存到局部变量里，例如：

Notice that:

注意：

• We use only one async pipe and hence only one subscription gets created.

  我们只用了一个 async 管道，因此也只会进行一次订阅。

• ngIf stores the result of the userStream|async in the local variable user.

  ngIf 把 userStream|async 的结果保存在了局部变量 user 中。

• The local user can then be bound repeatedly in a more efficient way.

  局部变量 user 可以反复绑定 —— 这很高效。

• No need to use the safe-traversal-operator ?. to access properties as ngIf will only display the data if userStream returns a value.

  不需要使用安全遍历操作符 ?. 来访问属性，因为 ngIf 只有在 userStream 有数据时才会显示内容。

• We can display an alternative template while waiting for the data.

  在等待数据到达时，我们可以显示一个代用模板。

Syntaxlink

语法link

Simple form:

简单形式：

• <div *ngIf="condition">...</div>
• <ng-template [ngIf]="condition"><div>...</div></ng-template>

Form with an else block:

带有 else 块的形式：

Form with a then and else block:

带有 then 和 else 块的形式：

Form with storing the value locally:

保存到局部变量的形式：