NgIflink

说明link

通常使用指令的简写形式 *ngIf="condition"，作为插入模板的锚点元素的属性提供。Angular 将其扩展为更明确的版本，其中锚点元素包含在 <ng-template> 元素中。

A shorthand form of the directive, *ngIf="condition", is generally used, provided as an attribute of the anchor element for the inserted template. Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element.

具有简写语法的简单形式：

Simple form with shorthand syntax:

      
        content_copy
      
      <div *ngIf="condition">Content to render when condition is true.</div>
    

具有扩展语法的简单形式：

Simple form with expanded syntax:

      
        content_copy
      
      <ng-template [ngIf]="condition"><div>Content to render when condition is
true.</div></ng-template>
    

带有 “else” 块的格式：

Form with an "else" block:

      
        content_copy
      
      <div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
    

带 “then” 和 “else” 块的简写形式：

Shorthand form with "then" and "else" blocks:

      
        content_copy
      
      <div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
    

本地存储值的形式：

Form with storing the value locally:

      
        content_copy
      
      <div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>Content to render when value is null.</ng-template>
    

*ngIf 指令通常用于根据条件显示内联模板，就像下面的例子展示的一样。默认的 else 模板是空白的。

The *ngIf directive is most commonly used to conditionally show an inline template, as seen in the following example. The default else template is blank.

      
        content_copy
      
      @Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show">Text to show</div>
`
})
export class NgIfSimple {
  show = true;
}
    

使用 else 显示替代模板link

Showing an alternative template using elselink

要在 expression 计算为 false 时显示一个模板，请使用如下所示的 else 模板绑定。else 绑定指向一个带有 #elseBlock 标签的 <ng-template>。该模板可以定义在组件视图中的任何地方，但通常放在 ngIf 的紧后方，以提高可读性。

To display a template when expression evaluates to false, use an else template binding as shown in the following example. The else binding points to an <ng-template> element labeled #elseBlock. The template can be defined anywhere in the component view, but is typically placed right after ngIf for readability.

      
        content_copy
      
      @Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
export class NgIfElse {
  show = true;
}
    

使用内部 then 模板link

Using an external then templatelink

在前面的例子中，then 子句的模板是内联的，也就是作为 ngIf 指令所在标签的内容。你还可以通过引用一个带标签的 <ng-template> 元素来指定一个在外部定义的模板。这样就可以让你在运行时更改模板，就像下面的例子所演示的。

In the previous example, the then-clause template is specified inline, as the content of the tag that contains the ngIf directive. You can also specify a template that is defined externally, by referencing a labeled <ng-template> element. When you do this, you can change which template to use at runtime, as shown in the following example.

      
        content_copy
      
      @Component({
  selector: 'ng-if-then-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    <button (click)="switchPrimary()">Switch Primary</button>
    show = {{show}}
    <br>
    <div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
    <ng-template #primaryBlock>Primary text to show</ng-template>
    <ng-template #secondaryBlock>Secondary text to show</ng-template>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
export class NgIfThenElse implements OnInit {
  thenBlock: TemplateRef<any>|null = null;
  show = true;

  @ViewChild('primaryBlock', {static: true}) primaryBlock: TemplateRef<any>|null = null;
  @ViewChild('secondaryBlock', {static: true}) secondaryBlock: TemplateRef<any>|null = null;

  switchPrimary() {
    this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
  }

  ngOnInit() {
    this.thenBlock = this.primaryBlock;
  }
}
    

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

Storing a conditional result in a variablelink

比如你想显示同一个对象中的一组属性。如果你在等待异步数据，此对象可能是未定义的。这时候，你可以使用 ngIf，并且把此条件结果保存在一个局部变量中，如下例所示。

You might want to show a set of properties from the same object. If you are waiting for asynchronous data, the object can be undefined. In this case, you can use ngIf and store the result of the condition in a local variable as shown in the following example.

      
        content_copy
      
      @Component({
  selector: 'ng-if-as',
  template: `
    <button (click)="nextUser()">Next User</button>
    <br>
    <div *ngIf="userObservable | async as user; else loading">
      Hello {{user.last}}, {{user.first}}!
    </div>
    <ng-template #loading let-user>Waiting... (user is {{user|json}})</ng-template>
`
})
export class NgIfAs {
  userObservable = new Subject<{first: string, last: string}>();
  first = ['John', 'Mike', 'Mary', 'Bob'];
  firstIndex = 0;
  last = ['Smith', 'Novotny', 'Angular'];
  lastIndex = 0;

  nextUser() {
    let first = this.first[this.firstIndex++];
    if (this.firstIndex >= this.first.length) this.firstIndex = 0;
    let last = this.last[this.lastIndex++];
    if (this.lastIndex >= this.last.length) this.lastIndex = 0;
    this.userObservable.next({first, last});
  }
}
    

这段代码只使用了一个 AsyncPipe，所以只会创建一个订阅。此条件表达式把 userStream|async 的结果保存在局部变量 user 中。然后你就可以反复绑定这个局部变量 user 了。

This code uses only one AsyncPipe, so only one subscription is created. The conditional statement stores the result of userStream|async in the local variable user. You can then bind the local user repeatedly.

只有当 userStream 返回了值的时候，才会有条件的显示此数据。所以你不用使用安全导航操作符 (?.) 来在访问属性时避免空值。你可以在等待数据时显示一个备用模板。

The conditional displays the data only if userStream returns a value, so you don't need to use the safe-navigation-operator (?.) to guard against null values when accessing properties. You can display an alternative template while waiting for the data.

简写语法link

Shorthand syntaxlink

*ngIf 的简写语法会把 "then" 和 "else" 子句分别扩展成两个独立的模板。比如，考虑下列简写语句，它要在等待数据加载期间显示一个加载中页面。

The shorthand syntax *ngIf expands into two separate template specifications for the "then" and "else" clauses. For example, consider the following shorthand statement, that is meant to show a loading page while waiting for data to be loaded.

      
        content_copy
      
      <div class="hero-list" *ngIf="heroes else loading">
 ...
</div>

<ng-template #loading>
 <div>Loading...</div>
</ng-template>
    

你可以看到，"else" 子句引用了带有 #loading 标签的 <ng-template>，而 "then" 子句的模板是作为宿主元素的内容提供的。

You can see that the "else" clause references the <ng-template> with the #loading label, and the template for the "then" clause is provided as the content of the anchor element.

不过，当 Angular 扩展此简写语法的时候，它创建了另一个带有 ngIf 和 ngIfElse 指令的 <ng-template>。此宿主元素包含的 "then" 子句的模板变成了无标签的 <ng-template> 的内容。

However, when Angular expands the shorthand syntax, it creates another <ng-template> tag, with ngIf and ngIfElse directives. The anchor element containing the template for the "then" clause becomes the content of this unlabeled <ng-template> tag.

      
        content_copy
      
      <ng-template [ngIf]="heroes" [ngIfElse]="loading">
 <div class="hero-list">
  ...
 </div>
</ng-template>

<ng-template #loading>
 <div>Loading...</div>
</ng-template>
    

隐式模板对象的存在，影响了结构型指令的嵌套规则。欲知详情，参见结构型指令。

The presence of the implicit template object has implications for the nesting of structural directives. For more on this subject, see Structural Directives.