我正在创建一个Survey应用程序,用户可以在其中创建调查。调查将有问题,每个问题将有选项。所以我的课程是这样的:
import { Question } from "./question";
export class Survey {
id: number;
title: string;
description: string;
questions:Question[];
}
export class Question {
id: number;
questionType: number;
question: string;
surveyId: number;
options: Option[];
}
export class Option {
optionId: number;
optionValue: string;
questionId: number;
optionType: string;
}
在我的组件中,我创建了FormArray的问题,在我的构造函数中,我设置的问题如下。
createSurveyForm(survey: Survey) {
this.surveyForm = this.fb.group({
title: ['', Validators.required ],
description: ['', Validators.required ],
id: [''],
questions: this.fb.array([])
});
}
当用户点击添加问题时,
addQuestion(): void {
this.questions = this.surveyForm.get('questions') as FormArray;
this.questions.push(this.createItem());
}
My Component html文件如下所示:
<div class="lead" formArrayName="questions"
*ngFor="let question of surveyForm.get('questions').controls; let i = index;">
<div [formGroupName]="i">
<div class="form-group">
<label>{{i+1}}</label>
<input type="text" class="form-control" placeholder="Enter the question"
id="question" formControlName="question">
</div>
</div>
</div>
到目前为止,这个工作非常好。现在我在这个ngFor循环中添加了一个按钮来为问题添加选项。我对Angular有点新,并坚持如何做到这一点。我试过下面的东西。
options: Option;
addOption(question: Question): void {
this.options = question.options;
this.options.push(new Option());
}
无论我尝试过什么都行不通。任何帮助将不胜感激。