Angular 对于动态添加的每一行(逐行),如何从我的表中检索用户在“输入”单元格中输入的数据?

Angular 对于动态添加的每一行(逐行),如何从我的表中检索用户在“输入”单元格中输入的数据?,angular,Angular,我从angular开始,不知道如何从表中恢复输入单元格的数据。知道每一行都是动态添加的。我应该在数组中使用双向数据绑定还是使用formGroup类 这是我的dashboard.component.html: <!--Dashboard--> <section class="section_4"> <form ng-submit="addRow()"> <div class="col text-center">

我从angular开始,不知道如何从表中恢复输入单元格的数据。知道每一行都是动态添加的。我应该在数组中使用双向数据绑定还是使用formGroup类

这是我的dashboard.component.html:

<!--Dashboard-->
<section class="section_4">
    <form ng-submit="addRow()">
        <div class="col text-center">
            <table class="table table-striped">
                <thead id="thead">
                    <tr id="head">
                        <th class="columnName">Action</th>
                        <th scope="col" *ngFor="let column of table.columns" class="columnName">{{ column.name }}</th>
                    </tr>
                </thead>
                <tbody id="tbody">

                    <tr *ngFor="let dynamic of dynamicArray; let j = index;" id="myRow">
                        <td id="deleteCell" (click)="deleteRow(j)">
                            <img id="deleteIcon" src="../../assets/img/cancel.png" /><span>suppr</span>
                        </td>
                        <td [formGroup]="inputForm" (ngSubmit)="onSubmit()" *ngFor="let column of table.columns; let i = index; trackBy:trackByIndex;"><input type="{{ column.type }}" name="{{column.name}}_{{j}}" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
                        <td><button (click)="onSubmit()">submit</button></td>
                    </tr>
                    <tr>
                        <td id="addCell" (click)="addRow()">
                            <img id="addIcon" src="../../assets/img/add.png" /><span>ajouter</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br>
        <div class="col-md-12 text-center">
            <button type="button" class="btn btn-primary mb-2 text-center" (click)="downloadFile()">Envoyer</button>
        </div>
    </form>
</section>
这是dashboard.component.ts:

import { Component, OnInit } from '@angular/core';
import { ParameterService } from '../service/parameter.service';
import { Table } from '../model/table.model';
import { FormControl, FormGroup } from '@angular/forms';

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

  table: Table;
  rows: Array<any> = [];
  dynamicArray: Array<any> = [];
  newDynamic: any = {};

  constructor(public ps: ParameterService) { }

  ngOnInit() {
    this.ps.getAllColumns().subscribe(res => {
      this.table = res;
      console.log(res);
    });
  }

  addRow() {
    this.newDynamic = { name: '', type: '', length: '', nullable: '', dataDefault: '' };
    this.dynamicArray.push(this.newDynamic);
    console.log(this.dynamicArray);
    return true;
  }

  deleteRow(i: number) {
    this.dynamicArray.splice(i, 1);
    console.log(this.dynamicArray);
    return true;
  }

  trackByIndex(index: number, obj: any): any {
    /* console.log(index);
     console.log(obj); */
    return index;
  }
}
以下是我的结果:


您应该将FormArray与FormControls一起使用。每次添加一行时,都会在FormArray中推送一个新的FormControl,然后分别将其删除

恢复是什么意思?我的意思是在我的数组的输入中填充数据。谢谢您的回答。请告诉我如何在我的代码上执行。这对我有很大帮助。有人有想法吗?我真的需要一个例子。