Question

我正在制作一个技能矩阵，该矩阵从数据库中读取问题并将其输出，然后使用单选按钮要求用户输入数字。我希望能够以（CurrentDate，score，skillID，UserID。

的格式将该数据发送到数据库。

我试图为读入的每个问题建立一个答案模型，因此for循环的每个迭代都将拥有自己的答案模型以及所需的数据，因此我可以将所有这些问题推送到一个数组中，然后发布这个。无法使它工作，但我认为那应该怎么做。

TS：

 export class QuestionListComponent implements OnInit, OnDestroy{
        questions: Question[] = [];
        private questionsSub: Subscription;
        skillLevel = []
        energyLevel = []
        answerModels = []
        thisIsMyForm: FormGroup


        answerModel = new Answer(null,1,1,1);   

        @Input() Capability: string;
        constructor(public questionsService: QuestionService, private formBuilder: FormBuilder){
            let myDate = new Date();
            this.answerModel = new Answer(myDate,1,1,1);

            this.thisIsMyForm = new FormGroup({
                formArrayName: this.formBuilder.array([])
            })
            this.buildForm()
        }

        buildForm(){
            const controlArray = this.thisIsMyForm.get('formArrayName') as FormArray;

            Object.keys(this.questions).forEach((i) => {
                controlArray.push(
                    this.formBuilder.group({
                        SkillID: new FormControl({value: this.questions[i].SkillID, disabled: true}),
                        score: new FormControl({value: this.questions[i].score, disabled: true}),
                        date: new FormControl({value: this.questions[i].date, disabled: true}),
                    })
                )
            })
            console.log(controlArray)
        }


        ngOnInit(){
            this.questionsService.getQuestions().subscribe(
                data => {
                this.questions = [];
                Object.keys(data).map((key)=>{ this.questions.push(data[key])});
                console.log(this.questions);
                });


        }

        ngOnDestroy() {
            this.questionsSub.unsubscribe();
        }

    }

HTML：

<form id="myForm" [formGroup]="thisIsMyForm">
<div [formArrayName]="'formArrayName'">
<ul *ngFor="let question of questions[0]; let i = index">
    <div [formGroupName]="i">
    <form #userForm = "ngForm">

        <div *ngIf="question.Capability === Capability">
            <h3 class="SubCat">{{question.SubCategory}} {{question.Skill}}</h3>
                <div class="EandS">
                    <h4 class="skill">Skill</h4>
                    <h4 class="energy">Energy</h4>
                </div>

                <div class = "buttons">
                    <div class="skillButtons">
                        <mat-radio-group aria-label="Select your Skill Level" [(ngModel)]="skillLevel[i]" [name]="'completedSkills-' + i" >
                            <mat-radio-button  [value]="0" class="rbuttonSkill">0</mat-radio-button>
                            <mat-radio-button  [value]="1" class="rbuttonSkill">1</mat-radio-button>
                            <mat-radio-button  [value]="2" class="rbuttonSkill">2</mat-radio-button>
                            <mat-radio-button  [value]="3" class="rbuttonSkill">3</mat-radio-button>
                            <mat-radio-button  [value]="4" class="rbuttonSkill">4</mat-radio-button>
                        </mat-radio-group>
                    </div>

                    <div class="energyButtons">
                        <mat-radio-group aria-label="Select your Energy Level" [(ngModel)]="energyLevel[i]" [name]="'completedEnergy-' + i">
                                <mat-radio-button  [value]="1" class="rbuttonEnergy">1</mat-radio-button>
                                <mat-radio-button  [value]="2" class="rbuttonEnergy">2</mat-radio-button>
                                <mat-radio-button  [value]="3" class="rbuttonEnergy">3</mat-radio-button>
                        </mat-radio-group>

                    </div>
                </div>


                <div class="Selected answer">
                <strong>Seleted Answer : {{skillLevel[i]}} {{question.SkillID}} </strong>
                <strong>Seleted Answer : {{energyLevel[i]}} {{question.SkillID}}</strong>
                <strong>{{answerModel | json}}</strong>
                </div>


        </div>
    </form>
</div>
</ul>
</div>
</form>
<button  [disabled]="skillLevel[i]==undefined" mat-raised-button color="accent">save</button>

<pre>{{ skillLevel | json }}</pre>
<pre>{{ energyLevel | json }}</pre>

我认为我需要为每个问题获取答案模型。

Answer 1

您正在组件的构造函数中调用this.buildForm（）-但您要等到组件构造函数之后调用NgOnInit时才加载问题-因此，在构建表单时，没有要迭代的问题。

您应在订阅中调用this.buildForm（）：

ngOnInit(){
        this.questionsService.getQuestions().subscribe(data => {
            this.questions = [];
            Object.keys(data).map((key)=>{ this.questions.push(data[key])});
            console.log(this.questions);

            this.buildForm();
        });
}

我也不确定他的行在您的html中是否正确：

<ul *ngFor="let question of questions[0]; let i = index">

您应该执行以下操作来迭代所有问题：

<ul *ngFor="let question of questions; let i = index">

编辑我花了一些时间为您研究概念的基本证明：

https://stackblitz.com/edit/angular-urgcdz

如何使用ngfor成角度的动态形式？

1 个答案: