

Angular(バージョン7)

以下のようにjson形式でitemsが用意されているとして、hoge()関数の条件分岐によって、fooに特定のメッセージを代入していき、それをhtmlに渡して値を表示させたいです。

component.tsでhoge

[code]

    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 = '空です';
        }
      });
    }
    
[/code]

html

[code]

    <div *ngFor="let item of items">
      <div>{{ hoge }}</div>
    </div>
    
[/code]

期待する動作は、  
ホゲホゲ1  
ホゲホゲ2  
空です

内容としては、  
・priceが100以上の場合は、ホゲホゲ'1  
・priceが1<=100ならホゲホゲ2を  
・それ以外なら空です  
と表示させることです。

なのですが、現状は全て空ですのみ表示されています。  
おそらく原因は、itemsのデータは3つあるのですが、最後にelseでpriceが0のパターンである空ですをfooに代入しそれが呼ばれているのかな？と思っていますが、それぞれのメッセージを表示させる具体的な解決策が思い当たらず質問させていただきました。


CC BY-SA 4.0
2022-05-04T07:52:40.350
88648
2022-09-01T00:44:49.413
52480
question
javascript angularjs typescript
AngularでjsonデータをforEachを使って値を取得


解決方法は2つあります、

  1. 配列に新しいキーを追加
  2. Html側で条件を作る

1の場合、`public hoge`を下記のコードに変更してください

[code]

     public hoge() {
        this.items.forEach((item, idx) => {
          if (item.price >= 100) {
            this.items[idx]['foo'] = 'ホグホグ１';
          } else if (item.price > 1 && 100 >= item.price) {
            this.items[idx]['foo'] = 'ホゲホゲ2';
          } else {
            this.items[idx]['foo'] = '空です';
          }
        });
      }
    
[/code]

2の場合、`html`を下記のコードに変更してください

[code]

    <div *ngFor="let item of items">
      <div *ngIf="item.price >= 100">ホグホグ１</div>
      <div *ngIf="item.price > 1 && 100 >= item.price">ホゲホゲ2</div>
      <div *ngIf="item.price == 0">空です</div>
    </div>
    
[/code]

サンプルコードは[こちらです](https://stackblitz.com/edit/angular-t6uews?file=src/app/app.component.html)


CC BY-SA 4.0
2022-09-01T00:44:49.413
90860
2022-09-01T00:44:49.413
40476
88648
answer