我如何使用“*ngIf else"? [英] How can I use "*ngIf else"?
问题描述
我正在使用 Angular，我想在这个例子中使用 *ngIf else(从版本 4 开始可用):
内容在这里...<div *ngIf="!isValid">其他内容在这里...
如何使用 ngIf else 实现相同的行为?
Angular 4 和 5:
使用else:
内容在这里...<ng-template #other_content>这里有其他内容...</ng-template>
你也可以使用then else:
<div *ngIf=isValid;then content else other_content">这里被忽略了</div><ng-template #content>内容在这里...</ng-template><ng-template #other_content>这里有其他内容...</ng-template>或者 then 单独:
<ng-template #content>内容在这里...</ng-template>
演示:
详情:
标签的实现，它是 根据 MDN:
HTML 元素是一种用于保持客户端加载页面时不会呈现但可能会呈现的内容随后在运行时使用 JavaScript 进行实例化.
I'm using Angular and I want to use *ngIf else (available since version 4) in this example:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
How can I achieve the same behavior with ngIf else?
Angular 4 and 5:
Using else:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
You can also use then else:
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>
Or then alone:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo:
Details:
<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN:
The HTML
<template>element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
这篇关于我如何使用“*ngIf else"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
