2017-07-26 11 views
1

firebaseからオブジェクトのオブジェクトを引き出しているため、私のionic 3アプリケーションでngx-pipesを使用しています。Angular 4 * ngFor、ngx-pipesはトップレベルのキーの名前を取得します

私は私のオブジェクトを取得し、私は、ページ上で使用できる変数にそれを回す:

getEvents() { 
    this.firebaseDatabase.getEvents.subscribe(data => { 
     console.log("Events ", data); 
     this.events = data; 
    }, error => { 
     console.log("Events ", error); 
    }); 
} 

私はデータをログに記録し、それはこのように戻ってくる:

eventIDHashed_1: 
    endDateTime:"tomorrow" 
    location:"somewhere" 
    roles: 
     GyyapYhHQDOriruHLvGPKaTOiRp2:"admin" 
    startDateTime:"today" 
    title:"Arisss & Nathan" 
    type:"wedding" 
eventIDHashed_2: 
    endDateTime:"tomorrow" 
    location:"somewhere" 
    roles: 
     GyyapYhHQDOriruHLvGPKaTOiRp2:"admin" 
    startDateTime:"today" 
    title:"Jack & Marlana" 
    type:"wedding" 

方法Iページに表示するのは一時的な解決策ですが、最初の行以外はすべて正常に動作しています。私はそれがeventIDHashed_1eventIDHashed_2

<div class="event-container"> 
    <div *ngFor="let event of events | values; let i = index"> 
     <span>{{events[i]}}</span> 
     <span>{{event.title}}</span> 
     <span>{{event.location}}</span> 
     <span>{{event.type}}</span> 
     <span *ngFor="let role of event.roles | pairs"> 
      <span>{{role[0]}}, {{role[1]}}</span> 
     </span> 
     <span>{{event.startDateTime}}</span> 
     <span>{{event.endDateTime}}</span> 
    </div> 
</div> 

私はすべての作業を持っており、実際のイベントID <span>{{events[i] | keys}}</span>除いて、すべての情報を取得できています。これは、私のすべてのリストを与えると言うイベント名(キー)を取得する必要がありますそれ(endDateTime, location, title, startDateTime...)の内部キーが、私はeventIDHashed_1

答えて

1

eventIDHashed_2 NGX-パイプで遊んでた後、イベントのIDを取得する必要があり、私はかなり単純pairs演算子を使用することができることを発見しました。

<div *ngFor="let event of events | pairs"> 
    <span>{{event[0]}}</span> 
    <span>{{event[1].title}}</span> 
    <span>{{event[1].location}}</span> 
    <span>{{event[1].type}}</span> 
    <span *ngFor="let role of event[1].roles | pairs"> 
     <span>{{role[0]}}, {{role[1]}}</span> 
    </span> 
    <span>{{event[1].startDateTime}}</span> 
    <span>{{event[1].endDateTime}}</span> 
</div> 

NGX-対me event

のキー(位置[0])と値(位置[1])を与える:私はこれまで以上からテンプレートを変更しました