Angular 4 - 具有嵌套数组的组件

时间:2018-06-10 07:55:52

标签: angular

我正在创建一个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());
  }

无论我尝试过什么都行不通。任何帮助将不胜感激。

0 个答案:

没有答案