模板中的ngIf-else [英] ngIf-else in template
本文介绍了模板中的ngIf-else的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试加载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
这篇关于模板中的ngIf-else的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文