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的部分。