如何保存 *ngFor 生成的输入数据

Question

所以，我正在使用 Angular 5，并且我有两个数组，其中包含从数据库中提取的数据：

["Reports", "UI"]

和

0: {ranges: "Low", ph: 0, days: 0}
1: {ranges: "Mediu,", ph: 0, days: 0}
2: {ranges: "High", ph: 0, days: 0}

我正在为第一个数组中的每个元素显示第二个数组。之后我有一个输入，并像我对第二个数组一样重复它

    ...
    <tbody *ngFor="let i of paramsData; let y = index"> <---Repeat the data from first array
      <ng-container *ngFor="let data of times; let x = index"> <---Repeat the data from second array in each element in the first array
        <tr>
          <td [attr.rowspan]="times.length" *ngIf="x == 0">{{i}}</td>
          <td>{{data.ranges}}</td>
          <td>
            <input type="number" class="form-control" name='weight'>
          </td>
          <td>{{data.ph}}</td>
          <td>{{data.days}}</td>
        </tr>
      </ng-container>
    </tbody>
    ...

问题：如何获得由*ngFor 自动生成的输入中引入的值？我无法在 formControlName 中分配值，因为所有输入都将具有相同的名称，并且只会保存一个值。

另外，我不能使用[(ngModel)]="someArray[x]" 将值存储在数组中，因为它只会将第一次迭代的值保存在第二次ngFor 上。

我失去了什么吗？有没有办法做到这一点？

-- 编辑--

StackBlitz 链接：https://stackblitz.com/edit/angular-ux4cqv

---

表格截图

Answer 1

Demo

您可以将表单实现为二维数组：

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormControl } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  formGroup: FormGroup;
  params = ["Reports", "UI"];
  ranges = [
    {ranges: "Low", ph: 0, days: 0},
    {ranges: "Medium,", ph: 0, days: 0},
    {ranges: "High", ph: 0, days: 0}
  ]
  constructor() {
    var paramsArray = new FormArray([]);
    this.params.forEach(t=> {
      var rangeArray = new FormArray([]);
      paramsArray.push(rangeArray);
      this.ranges.forEach(t=> {
        rangeArray.push(new FormControl(''))
      });
    });

    this.formGroup = new FormGroup({
      "values": paramsArray
    });
  }
}

app.component.html

<div [formGroup]="formGroup">
<table border="1" formArrayName="values">
    <thead>
        <tr>
            <th>Param. de Estimación</th>
            <th>Complejidad</th>
            <th>Peso</th>
            <th>Product. Hora</th>
            <th>Esf. en Dias</th>
        </tr>
    </thead>
    <tbody *ngFor="let i of params; index as y" [formArrayName]="y">
        <ng-container *ngFor="let data of ranges; index as x">
            <tr>
                <td [attr.rowspan]="ranges.length" *ngIf="x == 0">{{i}}</td>
                <td>{{data.ranges}}</td>
                <td>
                    <input type="number" class="form-control" [formControlName]="x" placeholder="Weight" name='weight'>
                </td>
                <td>{{data.ph}}</td>
                <td>{{data.days}}</td>
            </tr>
        </ng-container>
        <button type="submit" *ngIf="y==1">Pto. de Referencia</button>
    </tbody>
</table>
</div>

表单值保存到“values”二维数组中，可以通过调用formGroup.value获取：

{
  "values": [
    [
      "",
      "",
      ""
    ],
    [
      "",
      "",
      ""
    ]
  ]
}