Question

我在我的应用中使用Firebase和AngularFire2，因此嵌套数组是默认对象，可以使用着名的keys管道修复。它迭代正确数量的实例，但不会将任何数据附加到任何内容。 console.log()我已经显示了所有数据，所以我不明白问题是什么。

这是从Firebase

导出的数据块

{
  "01" : {
    "answers" : {
      "01" : {
        "answer" : "Less than 4 months",
        "id" : "bus_info_01_a_01"
      },
      "02" : {
        "answer" : "4 months - 7 months",
        "id" : "bus_info_01_a_02"
      },
      "03" : {
        "answer" : "7 months - 1 year",
        "id" : "bus_info_01_a_03"
      },
      "04" : {
        "answer" : "1-2 years",
        "id" : "bus_info_01_a_04"
      },
      "05" : {
        "answer" : "2-5 years",
        "id" : "bus_info_01_a_05"
      },
      "06" : {
        "answer" : "5-10 years",
        "id" : "bus_info_01_a_06"
      },
      "07" : {
        "answer" : "10+ years",
        "id" : "bus_info_01_a_07"
      }
    },
    "id" : "bus_exp_01",
    "name" : "bus_info_01",
    "question" : "How long have you been in Business?",
    "template" : "multi_choice"
  },
  "02" : {
    "answers" : {
      "01" : {
        "answer" : "yes",
        "id" : "bus_info_02_a_01_01",
        "trigger" : "yes"
      },
      "02" : {
        "answer" : "no",
        "id" : "bus_info_02_a_01_02",
        "trigger" : "no"
      }
    },
    "id" : "bus_exp_02",
    "name" : "bus_info_02",
    "no" : {
      "01" : {
        "id" : "web_no_01",
        "name" : "web_no_q_01",
        "question" : "What type of Industry do you operate in?",
        "template" : "sm_input"
      },
      "02" : {
        "id" : "web_no_02",
        "name" : "web_no_q_02",
        "question" : "What specialty products and or services stand at the forefront of who you are to your Customers?",
        "template" : "sm_input"
      },
      "03" : {
        "id" : "web_no_03",
        "name" : "web_no_q_03",
        "question" : "Would you rather be known for something else despite your current success?",
        "template" : "sm_input"
      },
      "04" : {
        "id" : "web_no_04",
        "name" : "web_no_q_04",
        "question" : "Do you already have a logo?",
        "template" : "sm_input"
      }
    },
    "question" : "Do you have a website?",
    "template" : "multi_choice",
    "yes" : {
      "01" : {
        "id" : "web_yes_01",
        "question" : "Website",
        "template" : "sm_input"
      }
    }
  }
}

我将其称为服务的方式就像这样

@Injectable()
export class AppService implements OnInit{
    MultiChoiceDemo: FirebaseListObservable<any>;

    constructor(private af: AngularFireDatabase){}

    getMulti(){
    this.MultiChoiceDemo = this.af.list('/questionnaire/business_info') 
    as FirebaseListObservable<any>

    return this.MultiChoiceDemo;
    }
}

接受它的组件就像这样设置

import { AppService }               from './app.service';



@Component({

    moduleId: module.id,
    selector: 'questionnaire-page',
    templateUrl:'./questionnaire.component.html',
    styleUrls: ['./questionnaire.component.css'],
    providers: [ AppService ]
})



export class QuestionnairePage implements OnInit{

    MultiChoice: FirebaseListObservable<any>;

    constructor(private _data: AppService ) {}

    ngOnInit() {
        this._data.getMulti().subscribe(MultiChoiceDemo =>{
             this.MultiChoice = MultiChoiceDemo;
             console.log(this.MultiChoice);
         }); 
    }
}

它正在模板中加载到

中

<fieldset *ngFor="let quest of MultiChoice"  class="col-xs-12">
    <div class="col-xs-0 col-sm-2"></div>

    <div class="col-xs-12 col-sm-8" style="background-color:#777;">
        <label class="col-xs-11 col-sm-7">
            {{quest.question}}
        </label>


        <label *ngFor="let ans of quest.answers | keys" 
            [attr.for]="ans.id" class="col-xs-12">

                <input type="radio" 
                [attr.id]="ans.id"
                [attr.value]="ans.answer"
                [attr.name]="quest.name"
                />
            {{ans.answer}}
        </label>
    </div>

    <div class="col-xs-0 col-sm-2 col-md-4"></div>
</fieldset>

我在各个地方来回添加elvis operator，我尝试将*ngFor语法切换为

* ngFor =“让ans of（quest.answers | keys）”

没有出现错误，数据显示在console.log()中，每个答案都有一个迭代输入，但是在HTML中查看除了每个调用的name属性之外什么都没有quest.name。有人知道为什么这不起作用吗？

嵌套* ngFor with“keys”管道迭代但不绑定数据

0 个答案: