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?
