Angular2 else 문


Answers

각도 4.0

<ng-template #elseTemplate>
  else
</ng-template>
<ng-container *ngIf="expression; else elseTemplate">
  true
</ng-container>

또는

<ng-container *ngIf="expression; then thenBlock; else elseBlock"></ng-container>
<ng-template #thenBlock>
  then
</ng-template>
<ng-template #elseBlock>
  else
</ng-template>

<template>기존 태그와의 이름 충돌을 피하기 위해 <ng-template> 을 사용하지 않습니다 .

각도 2.0

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

<ng-container> 대신 <div> 를 사용할 수 있습니다.

Question

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>

추악 해 보인다.




else 문에 대한 새로운 Angular 4.0.0 문법은 다음과 같습니다 :

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



이 시도

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