繁体   English   中英

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

[英]How to make a dynamic form in angular with an ngfor?

我正在制作一个技能矩阵,该矩阵从数据库中读取问题并将其输出,然后使用单选按钮要求用户输入数字。 我希望能够将这些数据以(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>

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

您在组件的构造函数中调用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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM