Angular2/Angularfire2 - [=11我如何获取 Firebase List Observable 中项目的键值？

Question

我正在使用 angular 2.0.0-rc.3 & angularfire 2.0.0-beta.2

我的 firebase 数据库中有以下结构

- 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 属性。我的预期是它会像这样输出 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 对象将是一本字典。如果您想以这种方式使用它，您可以使用管道将其转换为数组。还有一些方法可以保留密钥：

Angular2/Angularfire2 - [=11我如何获取 Firebase List Observable 中项目的键值？

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

angularfire2

angular