Angular2/Angularfire2 - 如何获取FirebaseListObservable中项目的关键值？

Question

我使用的角度2.0.0 rc.3 & angularfire 2.0.0 beta.2

我在我的火力点以下结构DB

- trivia 
    - questionData 
     - 20161003 
     - answer:1 
     - options 
      - 1: "In a car trunk" 
      - 2: "Under dead bodies" 
      - 3: "Up a tree" 
      - 4: "In a ditch" 
     - questionText: "Where do Daryl and Beth hide..." 
     - 20161002... 
     - 20161001... 

我有以下代码：

export class UserDataComponent { 
    questionData: FirebaseListObservable<any[]>; 

    constructor(public af: AngularFire) { 
     this.questionData = af.database.list("/questionData"); 
    } 

} 

而这个HTML

<ul> 
<li *ngFor="let question of questionData | async"> 
    <div class="question-container"> 
     <p>{{ question.questionText }}</p> 
     <ul> 
      <li *ngFor="let answer of question.options"> 
       <input type="radio" name="{{answer-key-here}}" value="{{answer-key-here}}" id="{{answer-key-here}}" [(ngModel)]="userAnswer"/> 
       <label htmlFor="{{answer-key-here}}"> {{ answer }} </label> 
      </li>     
     </ul> 
     <button (click)="submitAnswer()">Submit</button> 
    </div> 
</li> 

好吧，考虑到这一点。查看上面扩展的问题条目，我想列出答案，但想要获得关键值（1,2,3,4）并让它们写出名称，id，htmlFor属性。我的预期是，这将输出HTML这样的：

<ul> 
<li *ngFor="let question of questionData | async"> 
    <div class="question-container"> 
     <p>Where do Daryl and Beth hide...</p> 
     <ul> 
      <li *ngFor="let answer of question.options"> 
       <input type="radio" name="1" value="1" id="1" [(ngModel)]="userAnswer"/> 
       <label htmlFor="1"> In a car trunk </label> 
      </li>     
     </ul> 
     <button (click)="submitAnswer()">Submit</button> 
    </div> 
</li> 

我一直无法弄清楚如何做到这一点。任何人都可以指出我正确的方向，并帮助我了解我失踪的是什么？

Answer 1

你的question.options对象将是一本字典。如果你想以这种方式使用它，你可以使用管道将其转换为数组。有一些方法可以保留密钥：have a look at this SO-question