ionicとAngularによるWebアプリ開発 - 備忘録

第3話 複雑な*ngForの実装と注意点

＊重要＊

Angularのアップデートで、内容の一部が非推奨項目になっています。

[Angular] Angular v20 の変更点まとめ

https://qiita.com/ksh-fthr/items/0027538156c663b5342f

それに合わせた内容を、新しく書く予定ですが、この連載は停止とさせていただきます。

------------------------------------

この投稿には、以下の内容があります。

・*ngForについての簡単な説明

・複雑な構造の一例

・複雑な構造の実装例

・実行時エラーの対処

１．*ngForについての簡単な説明

この投稿は、ionicとAngularを使う際の備忘録的投稿ですが*ngForと言うのは、配列データをhtmlに出力する際の仕組みです。

以下は["リンゴ"、"ぶどう"、"バナナ"]と言う配列"arrFruits"を表示する例です。

<table>

<tr *ngFor="let each_name of arrFruits">

<td>

{{each_name}}

</td>

</tr>

</table>

上記の例は、arrFruitsの各要素（each_nameと言う変数として定義している）を順番に表示することができます。

２．複雑な構造の一例

シンプルな例でも便利な*ngFor機能ですが、より複雑な配列データに対して使うこともできます。

例えば、今、私が作っているGameBookアプリではページごとにタイトル、説明などのテキストデータや選択肢などのボタン、画像や動画表示などを並べることにより各ページを表現します。

参照：ゲームブックアプリを作りましょう

https://kakuyomu.jp/works/16818093076773345345/episodes/16818093076776155620

実際の実装とはだいぶ異なりますが、大まかな内容としては以下の様にType毎に異なる表示を用意することになります。

eachPage=

[

{

"Type":"text",

"value":"ページのタイトル",

},

{

"Type":"arraytext",

"value":

[

"1行目の記述",

"2行目の記述",

"3行目の記述",

]

},

{

"Type":"selectbutton",

"value":

{

"desc":"ボタン表記",

"nextpage":"page2",

}

},

]

３．複雑な構造の配列の実装

上の例ですと、*ngForは

・1番目の要素はただ1行のテキストを表示

・2番目の要素は複数行のテキストを表示（つまり*ngForのネスト)

・3番目の要素はボタンとそのアクションを表示

することになります。

htmlの実装例をいかに示します。

<table>

<!--ページ内の各アイテムを順番に表示-->

<tr *ngFor="let eachType of eachPage">

<!--1行テキスト-->

<td *ngIf="eachType['Type']=='text'">

{{eachType['value']}}

</td>

<!--複数行テキスト-->

<td *ngIf="eachType['Type']=='arraytext'">

<table>

<tr *ngFor=let eachText of eachType['value']>

<td>

{{eachText}}

</td>

</tr>

</table>

</td>

<!--選択肢ボタン-->

<td *ngIf="eachType['Type']=='selectbutton'">

<ion-button (click)="fnGotoPage(eachType['value']['nextpage'])">{{eachType['value']['desc']}}</ion-button>

</td>

</tr>

</table>

ここで例えば<td *ngIf="eachType['Type']=='text'">の*ngIfと言うのは、この条件、すなわち各要素であるアイテムの”Type”が"text"ならば表示するという表示・非表示の制御を行うコマンドです。

つまりページ内の各アイテムを順番に表示し、アイテムのタイプごとに表示内容を画面に出力する訳です。

４．実行時エラーの対処

上記の例のように、あるいはより複雑な(例えば何番目のアイテムかを示すindexも取得できるので、それを利用することで他の配列データにもアクセスできます)*ngForを使ったページを作ることができますが、重要な注意点があります。

それは、各タイプの表示をページの読み込み時に行うということです。

このデータはダミーのデータで構いませんし、実際に表示する前に初期化して問題ないので、配列データ定義の時点で仮データをセットしてください。

これを怠ると、データ定義時に存在しないパターンの表示時に実行時エラーが起きるのでご注意ください。

なおこれは、経験上、身に着けた対処以上のものではありません。

(angularの内部的な処理について詳しくはありませんし、これに関する記述も見たことがないです）