2017-07-26 35 views
1

我在离子3应用程序中使用ngx-pipes,因为我正在从firebase中拉对象。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" 

的方式我在页面上显示它是一个临时解决方案,但除第一行外,一切工作正常。我需要获得事件名称(键),它说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...)里面的钥匙,但我需要得到事件的id eventIDHashed_1eventIDHashed_2

回答

1

与NGX不锈钢管打后,我发现我可以使用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-对给我的键(位置[0])和所述值(位置[1])的event