模板中的ngIf-else [英] ngIf-else in template

问题描述

我正在尝试加载pictureA或pictureB. 我的第一个解决方案是这样的:

I'm trying to load pictureA or pictureB. My first solution is like this:

 <img *ngIf="my_picture" src="{{my_picture}}" width="180" height="80" >
 <img *ngIf="default_picture && !my_picture" src="{{default_picture}}">

但是我想在API参考上使用if-else:

But I would like to use if-else like on API Reference:

<div *ngIf="condition; else elseBlock">...</div>
<ng-template #elseBlock>...</ng-template>

所以，我正在尝试这样做:

So, I'm trying to do it like this:

 <div *ngIf="my_picture; else elseBlock">
     <img src="{{my_picture}}" >
 </div>
 <ng-template #elseBlock>
      <img src="{{default_picture}}" >
 </ng-template>

但是我得到了一个很大的异常堆栈跟踪:

But I'm getting a big exception stack trace:

zone.js:388 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngIfElse' since it isn't a known property of 'div'. ("
        -->

        <div [ERROR ->]*ngIf="my_picture; else elseBlock">
            <img src="{{my_picture}}"): UserComponent@15:13
Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and

所有指令都在"@ NgModule.declarations"中列出. ( ->

all directives are listed in the "@NgModule.declarations". (" -->

        [ERROR ->]<div *ngIf="my_picture; else elseBlock">
            <img src="{{my_picture}}" width="180" height="8"): UserComponent@15:8
'ng-template' is not a known element

如何实现简单的if-else块?

推荐答案

您应该使用ng-template

You should be using ng-template

<ng-template #loading>Failed to do something wrong...</ng-template>
<div *ngIf="userObservable;else loading;">
  Aravind is here
</div>
   <button (click)="userObservable = !userObservable">Click to toggle</button>
</div>

LIVEDEMO

LIVEDEMO

这篇关于模板中的ngIf-else的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！