2016-10-27 28 views
0

Angular2は新しく、jsonファイルを読みたいと思っています。それは働いている、私はRESTクライアントからファイルを取得する、私はコンポーネント内のローカル変数にファイルを保存することができます。今、私はngForでプロパティ(配列)を読み込もうとしていますが、これはうまくいきません。 Here's HTML:Angular2 JSON-Fileの反復処理

<div *ngFor="let categories of tasks.tasks"> 
    {{categories}} --> Display name of categorie (epg, recs) 
    <p *ngFor="let task of categories">{{task.text}}</p> 
</div> 

とJSON-ファイル:

{ 
    "tasks": { 
     "epg": [{ 
      "text": "\\\\...\\Daten\\Videos\\Aufnahmen" 
     }, { 
      "text": "C:\\Users\\...\\Desktop" 
     }], 
     "recs": [{ 
      "text": "\\\\...\\Daten\\Videos\\Aufnahmen" 
     }, { 
      "text": "C:\\...\\Junias\\Desktop" 
     }] 
    } 
} 

誰かが私を助けることができると思います;)

+0

「isnt working」とは何ですか?それは何かを示していますか?何も表示されませんか? –

+0

サブツリー 'tasks'は配列ではないので、' ngFor'でループすることはできません。 – rinukkusu

+0

http://stackoverflow.com/questions/31490713/iterate-over-typescript-dictionary-in-angular-2 – Bazinga

答えて

0

z={ 
"tasks": { 
    "epg": [{ 
     "text": "\\\\...\\Daten\\Videos\\Aufnahmen" 
    }, { 
     "text": "C:\\Users\\...\\Desktop" 
    }], 
    "recs": [{ 
     "text": "\\\\...\\Daten\\Videos\\Aufnahmen" 
    }, { 
     "text": "C:\\...\\Junias\\Desktop" 
    }] 
} 

のようにあなたのJSONを変更を検討

let a=this.z.tasks; 
    this.z = Object.keys(a).map(function(k) { return a[k] }); 

ここにはplunker

+0

ありがとう! しかし、これは問題です。タスク(epg、recs、...)はN個のタスク(epg、recs、timers、systems、...)になる可能性があるためです。 だから私は "ダブル" ngForについて考えました... これにも解決策がありますか? ありがとう;) – Junias

+0

これはかなり良いですね。 ;) しかし、もう一つのことがあります。私はこの解決法では可能ではありません: 配列の "キー"を表示したいので、出力は以下のようになります: epg \\\\ ... \\ Daten \\ Videos \\ Aufnahmen C:\\ Users \\ ... \\ Desktop recs \\\\ ... \\ Daten \\ Videos \\ Aufnahmen C:\\ Users \\ ... \\ Desktop どういうことを理解していますか? jsonを編集する必要があるかどうかは問題です) ありがとうございました! – Junias