我如何使用“*ngIf else"?

MDN

关注

发信

关注(28)粉丝(399)

我如何使用“*ngIf else"?

本文介绍了我如何使用“*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>

演示:

Plunker

详情:

:是 Angular 自己对标签的实现，它是根据 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:

Plunker

Details:

<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN:

这篇关于我如何使用“*ngIf else"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 03:01