Angular中的其他声明

Question

angular2如何建议渲染

<div *ngFor="let todo of unfinishedTodos">
    {{todo.title}}
</div>

万一如果 unfinishedTodos.length >0

在另一种情况下,文本"为空".

PS

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

看起来很难看

Answer 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>

重要

• 您可以使用eg <div>或任何其他标签代替<ng-container>

• <template>自4.0以来已被弃用,<ng-template>以避免与现有标签发生名称冲突.

Answer 2

在新的Angular 4.0.0语法中，else语句看起来像这样：

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