angular *ngFor、 ID から 名称を引っ張ってセット
しかし、いつの間にか半角スペースを許容してますね。なろう
私以外にもソースコードとか書いてる人いるのかな？
この連載はゲームブックアプリの開発の際に思ったり備忘録としたりするあれこれの記録です。
暑さに負けてダイエットのストレスに負けて、なかなか完了しないですゲームブックアプリですが、ゆっくりとですが進んでいます。
このアプリはionicとangularで作成しています。
一年半前に始めた訳ですが、この二つの組み合わせは本当に便利です。画面サイズごとのデザインとか意識しないでも、それなりのデザインが出来るionicコンポーネントに、配列データの扱いなどに強いangularの*ngForとかこれら無しで作れる気がしません。
*ngForを簡単に言えば、配列を順番に処理して表示する機能ですが、htmlで記述するのでプログラム的なコーディングはかなり少ないです。
条件に合わせて使用するCSSを変えたり([ngClass])、あるインデックスの場合だけ特殊な扱いをしたり、扱いに注意は必要ですが*ngForの入れ子を作ったりもできます。
今回の記事は、配列の中に、例えば商品IDがあり、別のデータから商品名を持ってくる場合の記述です。(パフォーマンスを無視すれば関数とかも使えるんで、あえてこう書かなくても良いかも）
-------tsの定義----------------------
商品マスタ={
"0001":{"name":"tomato", "price":"100"},
"0002":{"name":"potato", "price":"200"},
}
取引データ=[
{"itemID":"0001", "buy":"15"},
{"itemID":"0002", "buy":22"}
]
--------------------------------------
-------htmlの定義----------------------
<table>
<tr *ngFor="let eachdata of 取引データ">
<td>
{{商品マスタ[eachdata['itemID']]['name']}}
</td>
</tr>
</table>
--------------------------------------
若干躓いたので備忘録として記録です。
最初、<td>内のデータバインディング”{{ }}”を入れ子にしましたが、それでは動きませんのでご注意を！
(上記サンプルコードは、ここでエイやと書いたので動作保証はしませんが、だいたいこんな感じです。特に変数名に漢字を使った事は無いですが、少しだけ読みやすくなったらと試しました。）
