AngularJavaScript

Angular8でアイテムがある時・ない時のHTMLを出し分ける

Angularのチュートリアルをちょいちょいカスタマイズしながら触っているところなので、覚書。 アイテムの情報を出すHTML チュートリアルの中で、商品の情報を出すというサンプルがあります。 ただ、このままだと該当するア […]

広告ここから
広告ここまで

Angularのチュートリアルをちょいちょいカスタマイズしながら触っているところなので、覚書。

アイテムの情報を出すHTML

チュートリアルの中で、商品の情報を出すというサンプルがあります。

<h2>Product Details</h2>

<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>

</div>

ただ、このままだと該当するアイテムがない時にh2タグ以外何も表示されません。

アイテムがない時の表示にも対応する

らこさんのブログにちょうどいい記事がありましたので、それを試します。

<h2>Detail</h2>
<div *ngIf="product; then Detail; else NoItem">
</div>

<ng-template #Detail>
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>
</ng-template>

<ng-template #NoItem>
  <p>No such item</p>
</ng-template>

ng-templateでアイテムがある場合、ない場合それぞれのHTMLを定義し、*ngIfではthen / elseで呼び出すテンプレートを変えるだけです。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts