Angularの便利タグ・・・というサイトで紹介しているタグが本当に便利でした
ゲームブックの方、凝り性なせいか生来の怠け者のせいか、なかなか完了しません。
プログラムを書くことをコーディングと言いますが、ionic（そしてAngular）は素晴らしく便利だと思いますが、一寸ばかり勝手が違う点があり"home.page.html"のコーディングがすさまじい事になりつつあります。
今、フラグのリストを表示して、各フラグ横のボタンを押すことでフラグセットページとフラグチェックページが判るようにしているところです。
おさらいになりますが、Angularでは*ngForと言う機能を使い配列要素を(何らかの加工をしつつ)繰り返し表示できます。
例：
let Fruits = [{"name":"オレンジ", "price":"200jpy"}, {"name":"リンゴ", "price":"220jpy"}];
という配列(連想配列を要素とする配列ですね)があれば
<table>
<tr *ngFor="let eachFruits of Fruits;">
<td>{{eachFruits["name"]}}</td>
<td>{{eachFruits["price"]}}</td>
</tr>
</table>
と言う表記で
オレンジ 200jpy
リンゴ 220jpy
というテーブルが表示されます。
上の例ですと、配列1要素に対して1行の表示なのですが、今回、これを2行にしたくて苦労していました。
四苦八苦の末に見つけたのが以下のサイトです。
Angularの便利タグng-container, ng-content, ng-template
https://qiita.com/shibukawa/items/c8c7fd22c1054348db3a
どれも看板に偽りなしと言う感じのようですが、とりあえず、今回の問題解決には"ng-container"が威力を発揮しました。
<tr>タグに対して*ngForを記述していたのですが、その外側に<ng-container>タグを使い、その中に*ngForを記述することで、2つの<tr>を使用する事が出来ました。
記述中ですがこんな感じです。
<table border="1">
<ng-container *ngFor="let eacharrFlagDisp of arrFlagDisp;">
<tr>
<td>{{eacharrFlagDisp["FlagNo"]}}</td>
<td>{{eacharrFlagDisp["dispDesc"]}}</td>
<td>
<ion-button [hidden]="eacharrFlagDisp['Desc']!=eacharrFlagDisp['dispDesc']" (click)="fnGetThisFlagInfo(eacharrFlagDisp['FlagNo'])">{{t_fix["divFlagPage"]["text"]["2"]}}</ion-button>
</td>
</tr>
<tr><td colspan="3">ここに関連ページを記述予定</td></tr>
</ng-container>
まだまだ勉強は続きますね。
