我使用的是Angular,我想在这个例子中使用*ngIf else(从版本4开始可用):
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
我怎样才能用ngIf else实现同样的行为?
我使用的是Angular,我想在这个例子中使用*ngIf else(从版本4开始可用):
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
我怎样才能用ngIf else实现同样的行为?
当前回答
对于Angular 9/8
源链接及示例
export class AppComponent {
isDone = true;
}
1) * ngIf
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>
2) *ngIf和Else
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) *ngIf, Then和Else
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
其他回答
在Angular 4.x.x中
你可以用四种方式使用ngIf来实现一个简单的if-else过程:
Just use If <div *ngIf="isValid"> If isValid is true </div> Using If with Else (please notice to templateName) <div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template> Using If with Then (please notice to templateName) <div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template> Using If with Then and Else <div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing </div> <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template>
提示:ngIf对表达式求值,然后呈现then或else 当表达式分别为真或假时,模板在其位置。 通常: 那么template就是ngIf的内联模板,除非绑定到不同的值。 除非绑定,否则模板为空白。
如果isShow为真,则第一行执行,否则执行第二行,因为elseBlockShow作为引用变量。
<div *ngIf="isShow; else elseBlockShow">
Text to show for If
</div>
<ng-template #elseBlockShow>
Text to show for else block
</ng-template>
<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font"> </div>
<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>
对于Angular 9/8
源链接及示例
export class AppComponent {
isDone = true;
}
1) * ngIf
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>
2) *ngIf和Else
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) *ngIf, Then和Else
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
在HTML标签或模板上使用if条件有两种可能:
*ngIf指令来自CommonModule,在HTML标签上; if - else