☰

「*ngIf else」はどのように使用すればいいですか? 質問する

tag-icon • tag-icon angular if-statement angular-template
「*ngIf else」はどのように使用すればいいですか? 質問する

*ngIf else私は Angular を使用しており、この例では (バージョン 4 以降で利用可能)を使用したいと考えています。

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

で同じ動作を実現するにはどうすればいいでしょうかngIf else?

ベストアンサー1

角度4と5 :

使用方法else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

以下も使用できます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>

またはthen単独で:

<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>

デモ：

プランカー

詳細：

<ng-template>: Angular独自の<template>タグの実装であり、MDNによると:

HTML<template>要素は、ページが読み込まれたときにレンダリングされないが、実行時に JavaScript を使用してインスタンス化される可能性があるクライアント側コンテンツを保持するためのメカニズムです。

おすすめ記事