如何使用ngfor成角度的動態形式？

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