Angular 中的其他声明 [英] Else statement in Angular

问题描述

angular2 建议如何渲染

How does angular2 propose to render

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

如果 unfinishedTodos.length >0

在其他情况下，文本为空".

and text "empty" in another cases.

附言

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

看起来很丑

推荐答案

语法兼容 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>

• You can use e.g. <div>, or any other tag, instead of <ng-container>

<template> 自 4.0 起已被弃用，取而代之的是 <ng-template> 以避免名称冲突 已有标签.

<template> had been deprecated since 4.0 in favor of <ng-template> to avoid name collision with already existing tag.

这篇关于Angular 中的其他声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！