如何正确存储和使用来自 ng Form 的数据

Question

到目前为止，这是我的代码：

我的组件.html：

<div class="container">
  <Form #a ="ngForm" ngForm (ngSubmit)="onSubmit(a)">
    
    <div *ngFor="let question of questions">
      <div class = "form-group">
      <a>{{question.questionId}}. {{question.question}}</a><br>
      <input type="radio" ngModel name="Ans{{question.questionId}}" value="A" >
      <label for="html">A. {{question.optionsA}}</label><br>

      <input type="radio" ngModel name="Ans{{question.questionId}}" value="B" >
      <label for="html">B. {{question.optionsB}}</label><br>

      <input type="radio" ngModel name="Ans{{question.questionId}}" value="C" >
      <label for="html">C. {{question.optionsC}}</label><br>

      <input type="radio" ngModel name="Ans{{question.questionId}}" value="D" >
      <label for="html">D. {{question.optionsD}}</label><br>
    </div>
  </div>

    <button class="btn btn-primary " type="submit" >Submit</button>
  </Form>

  <div *ngIf="results.length >0">
    <table>
      <thead>
        <th>Question No.</th>
        <th>Correct Answer</th>
        <th>Your Answer</th>
      </thead>
      <tbody *ngFor="let question of questions">
        <td>{{question.questionId}}</td>
        <td>{{question.answer}}</td>
      </tbody>
    </table>
    {{score}}
    {{results.length}}
     </div>
</div>

和我的component.ts：

import { Component, OnInit } from '@angular/core';
import { Quiz1 } from 'src/app/models/quiz1.model';
import { Quiz1Service } from 'src/app/services/quiz1.service';
import {FormControl, FormGroup, NgForm} from '@angular/forms';


@Component({
  selector: 'app-quiz1',
  templateUrl: './quiz1.component.html',
  styleUrls: ['./quiz1.component.css']
})
export class Quiz1Component implements OnInit {

  questions?: Quiz1[];
  currentQuestion: Quiz1 = {};
  currentIndex = -1;
  score = 0;
  results:String[] = [];
  //index?: String[] = ['Ans1','Ans2'];
  
  constructor(private quiz1Service: Quiz1Service) { }

  ngOnInit(): void {
    this.retrieveQuestions();
    }

  retrieveQuestions(): void {
    this.quiz1Service.getAll()
      .subscribe({
        next: (data: any) => {
          this.questions = data;
          console.log(data);
        },
        error: (e: any) => console.error(e)
      });
  }

  onSubmit(a:NgForm){
    this.results?.push(a.value);
    console.log(this.results);
    console.log(this.results.length)
    this.questions?.forEach((questions) => {
      console.log(questions.questionId);
      
      if(questions.answer==this.results[questions.questionId-1]){
        this.score++
        console.log(this.score)
      }
    });
  }

}

当我在控制台中打印结果数组时，这就是我得到的：

Array(1)
0: {Ans1: 'A', Ans2: 'C'}
length: 1
[[Prototype]]: Array(0)

如您所见，它将所有数据存储在一个索引中，并且字段名称根本不起作用。

我想要的只是存储在数组中不同索引中的字段数据，所以我可以使用它。

那可能吗？

Answer 1

我不认为你可以使用模板驱动的 forms 来实现你想要的。

您将不得不使用反应式 forms 和FormArray 。