从Angular4开始的ngIf新功能

Angular 4 将在几天之内发布，并且对内置的 ngIf 模板指令 进行了很好的补充。 也就是说，我们现在可以定义一个用于 else 子句的模板，并且我们可以分配一个局部变量来保存 if 子句的结果值。

以下是如何为 ngIf 使用这两个新功能：

其他条款

所以过去是，为了将 else 子句作为 ngIf 语句的一部分，您必须改为创建另一个 ngIf 语句，并否定第一个语句：

<div *ngIf="likeThis">
  Like this!
</div>
<div *ngIf="!likeThis">
  Like that!
</div>

但是现在我们可以为使用 ng-template 定义的模板定义一个带有引用名称的 else 子句：

<div *ngIf="things.car; else noCar">
  Nice car!
</div>
<ng-template #noCar>
  Call a Uber.
</ng-template>

局部变量赋值

通常，if 语句的结果值不仅仅是布尔值 true 或 false，而是您可能希望轻松引用的值。 使用新的 ngIf，您可以轻松地将 if 语句的结果分配给局部变量。 例如，我们的 things 对象在我们的组件类中看起来像这样：

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

您可以像这样引用 if 语句的结果：

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

您当然可以结合使用 else 子句和局部变量赋值：

<div *ngIf="things.car; else noCar; let car">
  Nice {{ car }}!
</div>
<ng-template #noCar>
  Call a Uber.
</ng-template>

ngIf 与异步管道

ngIf 指令的新功能在与异步管道结合使用时变得非常强大，正如 Angular 大学的 这篇文章 中所解释的。

例如，您可以使用 async 管道自动订阅 observable，使用 else 子句定义加载模板，并将 observable 的结果值放入局部变量中。

让我们创建一个简单的 observable 来说明：

// ...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/delay';

// ...
export class AppComponent {
  things$ = Observable.of({
    car: 'Honda',
    shoes: 'Nike',
    shirt: 'Tom Ford',
    watch: 'Timex'
  }).delay(1000);
}

我们的 observable 通过在发送数据前等待 1 秒来模拟网络调用。

现在，您可以使用 async 管道订阅 things$ 可观察对象，使用加载消息的模板定义 else 子句，并声明您可以使用的局部变量可观察对象获取数据后访问：

<div *ngIf="things$ | async; else loading; let things">
  Nice {{ things.watch }}! <!-- Nice Timex! -->
</div>
<ng-template #loading>
  Loading your things...
</ng-template>