javascript - angular 2 NgFor 只支持绑定(bind)到 Iterables 比如 Arrays

Question

我在 Angular 2 项目中使用 Reactive Form 模式。我想用答案动态填充容器(使用 http 调用获取并填充答案对象)。

响应式表单对象结构:

public questionDetailForm = this.fb.group({
    type    : ['', Validators.required],
    title   : ['', Validators.required],
    required: [false],
    answers : this.fb.array([])
});

用于填充“questionDetailForm”对象的“answers”键的辅助数组:

public formArray = <FormArray>this.questionDetailForm.controls['answers'];

'formArray' 由 http 调用响应数据填充:

if (response.data.question.answers != null && response.data.question.type_id !== 400 && response.data.question.type_id !== 800) {
    for (const key in response.data.question.answers) {
        if (response.data.question.answers.hasOwnProperty(key)) {
           this.formArray.push(new FormControl(response.data.question.answers[key] , Validators.required));
        }
    }
}

问题出现在 html 文件中(以粗体突出显示):

<div fxLayout="row" fxFlexOffset="10" *ngFor="let answer of **questionDetailForm.controls['answers'];** let i = index" class="base-input-container answer-container">
    <md-input-container fxFlex="70" [ngClass]="{haserror: formErrors.answer && i === answerIndexError}">
       <input mdInput type="text" [formControl]="answer" placeholder="Answer">
    </md-input-container>
    <button type="button" fxFlexOffset="3" class="remove-answer" md-fab mdTooltip="remove answer" (click)="removeAnswer(i)" color="primary"><i class="material-icons">remove</i></button>
</div>

我刚刚从 angular-cli beta 版本更新到 1.0.0。我在使用测试版时没有遇到同样的问题。

Answer 1

您可以遍历 FormArray 尝试:

questionDetailForm.get('answers')

或者:

questionDetailForm.controls['answers'].controls