Angular(バージョン7)
以下のようにjson形式でitemsが用意されているとして、hoge()関数の条件分岐によって、fooに特定のメッセージを代入していき、それをhtmlに渡して値を表示させたいです。
component.tsでhoge
items: {
"price": 200,
"count": 5
},
{
"price": 50,
"count": 3
},
{
"price": 0,
"count": 3
},
component.ts
// itemsのjsonデータ
public items: Items;
// 画面で表示する値
public foo: string;
ngOnInit {
this.hoge();
}
public hoge() {
// jsonのitemsデータをひとつづつ取り出す
this.items.forEach(item => {
// 取り出したデータでpriceが100以上ならば、画面に表示する値に値を代入
if (item.price >= 100) {
this.foo = 'ホゲホゲ'1;
// 取り出したデータでpriceが1より大きく100以下ならば、画面に表示する値に値を代入
} else if (item.price > 1 && 100 >= item.price) {
this.foo = 'ホゲホゲ2';
// 上記以外ならば、画面に表示する値に値を代入
} else {
this.foo = '空です';
}
});
}
html
<div *ngFor="let item of items">
<div>{{ hoge }}</div>
</div>
期待する動作は、
ホゲホゲ1
ホゲホゲ2
空です
内容としては、
・priceが100以上の場合は、ホゲホゲ'1
・priceが1<=100ならホゲホゲ2を
・それ以外なら空です
と表示させることです。
なのですが、現状は全て空ですのみ表示されています。
おそらく原因は、itemsのデータは3つあるのですが、最後にelseでpriceが0のパターンである空ですをfooに代入しそれが呼ばれているのかな?と思っていますが、それぞれのメッセージを表示させる具体的な解決策が思い当たらず質問させていただきました。