Angular 4 * ngFor，ngx-pipes获取顶级密钥的名称

问题描述：

我在离子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_1和eventIDHashed_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_1和eventIDHashed_2

答

与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

Angular 4 * ngFor，ngx-pipes获取顶级密钥的名称

相关推荐