angular - Angular动态表单ngfor多提交？

Question

我正在使用后端 mvc api、frontendi angular 制作一个简单的质量评估表。在这种形式中，我绘制了问题 api 并将它们列出在一个表格中。在每个问题旁边，我放置了一个选择/选项运算符。当我最终要sumbit时，我会收集所有问题的答案并将它们发送到api。ngFor 自带的 Select / Options 操作符。如何从这些选择/选项运算符中获取值值。你能帮助我吗 ？

角组件：

import { Component, OnInit } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { FromElement } from '../Models/FromElement';
import { EndCall } from '../Models/EndCall';
import { CalculateForm } from '../Models/CalculateForm';
import { User } from '../Models/User';
import { FormElementServicesService } from '../services/formElementServices.service';
import { FormArray, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

@Component({
  selector: 'app-KaliteForm',
  templateUrl: './KaliteForm.component.html',
  styleUrls: ['./KaliteForm.component.css'],
  providers: [FormElementServicesService]
})
export class KaliteFormComponent implements OnInit {
  constructor(private formElement: FormElementServicesService) {}
  formValue:FormGroup;
  cagriDegerlendirmesi: FromElement[];

  ngOnInit() {
    this.formElement.getFormElement().subscribe(data => {
      this.cagriDegerlendirmesi = data;
    });
  }
  selectedOption: string;
  options = [
    { name: 'Evet (20 Puan)', value: 20 },
    { name: 'Kararsız (10 Puan)', value: 10 },
    { name: 'Hayır (0 Puan)', value: 0 }
  ];

  gonder(){
    console.log(this.formValue.value)
  }
}

html:

<table class="table table-hover">
  <thead>
    <tr class="table-light">
      <th scope="col">Kalite Değerlendirme Değerleri</th>
      <th scope="col">Notlandırma</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-light" *ngFor="let item of cagriDegerlendirmesi">
      <td>{{ item.fromItem }}</td>
      <td>
        <div class="form-group-sm">
          <select class="custom-select" id="{{item.id}}">
            <option class="text-justify" *ngFor="let o of options">
              {{o.name}}
           </option>
          </select>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

标签： angularangular-ng-ifdynamic-forms