首页 文章

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

提问于
浏览 次
2

所以，我正在使用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中保存第一次迭代的值

我失去了什么吗？有没有选择呢？

-- EDIT --

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

Screenshot of the table

My table looks like this

angularjs angular angular5 ngfor

1 回答

  • 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": [
    [
      "",
      "",
      ""
    ],
    [
      "",
      "",
      ""
    ]
  ]
}
    回复于

相关问题