2016-10-20 5 views
1

は、私は角2.0.0-rc.3を使用しています& angularfire 2.0.0-beta.2Angular2/Angularfire2 - FirebaseListObservableのアイテムのキー値はどのように取得できますか?

I持って私のfirebaseで次のような構造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)を取得し、name、id、htmlFor属性に書き出すようにしたい。私はこれを実現する方法を理解することができていない

<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> 

:私の期待感は、このような出力HTMLだろうということでしょう。誰かが私を正しい方向に向けることができ、私が逃していることを理解するのを助けることができますか?

答えて

1

question.optionsオブジェクトは辞書になります。この方法で使用する場合は、配列に変換するためにパイプを使用することができます。キーを保存する方法もあります。have a look at this SO-question

関連する問題