Angular 中的其他语句答案

【问题标题】：Else statement in AngularAngular 中的其他语句
【发布时间】：2016-12-21 14:49:32
【问题描述】：

angular2 建议如何渲染

<div *ngFor="let todo of unfinishedTodos">
    {{todo.title}}
</div>

如果unfinishedTodos.length >0

在其他情况下，文本为“空”。

附言

<div *ngIf="unfinishedTodos && unfinishedTodos.length > 0">
    <div *ngFor="let todo of unfinishedTodos">
        {{todo.title}}
    </div>
</div>
<div *ngIf="!unfinishedTodos ||  unfinishedTodos.length <= 0">
    empty
</div>

看起来很丑

【问题讨论】：

标签： angular if-statement conditional-statements

【解决方案1】：

CSS 解决方案

<style>
    .empty { display: none; }
    .empty:only-child { display: block; }
</style>

<div>
    <div *ngFor="let todo of unfinishedTodos">
        {{todo.title}}
    </div>
    <div class="empty">
        empty
    </div>
</div>

【讨论】：

【解决方案2】：

语法与 Angular 4.0 及更高版本兼容

<ng-template #elseTemplate>
  Content displayed if expression returns false
</ng-template>
<ng-container *ngIf="expression; else elseTemplate">
  Content displayed if expression returns true
</ng-container>

或

<ng-container *ngIf="expression; then thenBlock; else elseBlock"></ng-container>
<ng-template #thenBlock>
  Content displayed if expression returns true
</ng-template>
<ng-template #elseBlock>
  Content displayed if expression returns false
</ng-template>

语法与 Angular 2.0 及更高版本兼容

<ng-container *ngIf="expression">
    true
</ng-container>
<ng-container *ngIf="!expression">
    else
</ng-container>

重要

您可以使用例如<div> 或任何其他标签，而不是 <ng-container>
<template> 自 4.0 起已被弃用，取而代之的是 <ng-template> 以避免名称冲突 with already existing tag.

【讨论】：

【解决方案3】：

试试这个

<div *ngFor="let todo of unfinishedTodos">
    {{todo.title}}
</div>
<div *ngIf="!unfinishedTodos?.length">
    empty
</div>

【讨论】：

【解决方案4】：

使用新的 Angular 4.0.0 语法，else 语句如下所示：

<div *ngIf="unfinishedTodos && unfinishedTodos.length > 0; else empty">
   <div *ngFor="let todo of unfinishedTodos">
      {{todo.title}}
   </div>
</div>
<ng-template #empty>
   empty
</ng-template >

【讨论】：

太慢了。更多示例github.com/angular/angular/blob/…
我希望在发布时语法会更好。
在 Angular 4.0 中，<template> 已弃用，取而代之的是 <ng-template>。