ngIf 与 "as" 和 else

Question

我怎样才能拥有一个带有“as”语法和一个 else 块的 ngIf？

<div class="customer-form-container" *ngIf="(customer$ | async) as customer; else elseBlock">

<div class="customer-not-found-container" #elseBlock>
  <h1>customer not found</h1>
</div>

Answer 1

您可以为此目的使用ng-template 。 ng-template 标签永远不会出现在 DOM 中，但您可以使用它来定义您可以使用的模板，例如在ngIf的 else 语句中。

<div *ngIf="(customer$ | async) as customer; else elseBlock">
  <!-- you can use "customer" here -->
</div>

<ng-template #elseBlock>
  <div class="customer-not-found-container">
    <h1>customer not found</h1>
  </div>
</ng-template>

您还可以在此处阅读有关结构指令（例如ngIf ）的更多信息。 还有一个关于ng-template的部分。