AngularのElseステートメント 質問する

AngularのElseステートメント 質問する

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>

醜い

ベストアンサー1

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><ng-template>名前の衝突を避けるため、4.0以降は非推奨となっていた。すでにタグが存在します。

おすすめ記事