angular 2 NgFor僅支持綁定到可迭代對象，例如數組

Question

我在角度2項目中使用反應式表單模式。 我想用答案動態地填充一個容器（使用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。 使用Beta版時，我還沒有遇到同樣的問題。

Answer 1

您可以遍歷FormArray嘗試：

questionDetailForm.get('answers')

要么：

questionDetailForm.controls['answers'].controls