CODEWITHSUNDEEP
angularangularfire2
Lisa-J
Lisa-J

Reputation: 109

Angular2/Angularfire2 - How do/can I get the key values of items in FirebaseListObservable?

I am using angular 2.0.0-rc.3 & angularfire 2.0.0-beta.2

I have the following structure in my 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...

I have the following code:

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

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

}

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

OK, so with that in mind. Looking at the expanded question entry above, I want to list out the answers, but would like to get the key values (1, 2, 3, 4) and have them write out to the name, id, htmlFor attributes. My anticipation would be that it would output HTML like this:

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

I haven't been able to figure out how to accomplish this. Can anyone point me in the right direction, and help me understand what I am missing?

Upvotes: 1

Views: 1121

Answers (1)

Osko
Osko

Reputation: 56

your question.options object will be a dictionary. If you want to use it this way, you can take a pipe in order to convert it to an array. There are ways to preserve the key as well: have a look at this SO-question

Upvotes: 1

Related Questions