时间戳

首页 > 解决方案 > 如何检索用户在动态添加行的输入表中输入的数据？

angular - 如何检索用户在动态添加行的输入表中输入的数据？

问题描述

我尝试检索用户在动态添加行的输入表中输入的数据。但是我必须在 component.ts 中为每个新行添加一个新数组，以便在表中动态添加以使用双向数据绑定恢复数据。

这是我的 HTML：

<tbody id="tbody">
    <tr>
        <td></td>
        <td *ngFor="let column of table.columns; let index = index; trackBy:trackByIndex;"><input [(ngModel)]="inputValue[index]" type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
    </tr>
    <tr>
        <td></td>
        <td *ngFor="let column of table.columns; let i = index; trackBy:trackByIndex;"><input [(ngModel)]="inputValue2[i]" type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
    </tr>
    <tr>
        <td></td>
        <td *ngFor="let column of table.columns"><input type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
    </tr>
    <tr>
        <td></td>
        <td *ngFor="let column of table.columns"><input type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
    </tr>
    <tr>
        <td></td>
        <td *ngFor="let column of table.columns" id="myCell"><input id="myInput" type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
    </tr>
    <tr *ngFor="let dynamic of dynamicArray; let i = index;" id="myRow">
        <td id="deleteCell" (click)="deleteRow(i)">
            <img id="deleteIcon" src="../../assets/img/cancel.png" /><span>suppr</span>
        </td>
        <td *ngFor="let column of table.columns; let j = index; trackBy:trackByIndex;"><input [(ngModel)]="inputValue3[j]" type="{{ column.type }}" name="cell" maxLength="{{ column.length }}" required="{{ column.nullable }}" value="{{ column.dataDefault }}"></td>
    </tr>
    <tr>
        <td id="addCell" (click)="addRow()">
            <img id="addIcon" src="../../assets/img/add.png" /><span>ajouter</span>
        </td>
    </tr>
</tbody>

这是我的 component.ts ：

  export class DashboardComponent implements OnInit {
    table: Table;
    dynamicArray: Array<any> = [];
    newDynamic: any = {};
    inputValue: string[] = [];
    inputValue2: string[] = [];
    inputValue3: string[] = [];
}

这是我的结果：

在此处输入图像描述

标签： angular

解决方案

我建议重新考虑 DashboardComponent 和模板的结构。您可能需要基于表格中的列在表格上创建标题行，以及可以添加和删除对象的单个行对象数组，以便在 UI 中添加/删除行。关键的一点是，无论您选择如何构建模板和数据，您都需要在每个输入元素上都有一个唯一的名称字段！

有关更多信息，请参阅角度指南/教程：https ://angular.io/start/forms

这是一个非常粗略的示例，希望可以帮助您提供一些想法：

export class DashboardComponent {
  table: Table; // assuming there is a name field on each table.column for the sake of the example
  rows: Array<any> = [];

  addRow() {
    const row = {};
    table.columns.forEach((column) => row[column.name] = 0);
    rows.push(row);
  }
}

注意：在每个输入上都有一个唯一的名称字段是关键！这样，每个输入值最终都会被唯一地标识为 angular，并且它可以正确地分配 ngModel。下面的示例只是保证唯一性的一种方法。

<table>
  <thead>
    <tr>
      <th *ngFor="let column of table.columns">{{column.name}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows; let i = index">
      <td *ngFor="let column of table.columns">
        <input name="{{column}}_{{i}}
          [(ngModel)]="row[column.name]"
        />
      </td>
    </tr>
    <tr>
      <td id="addCell" (click)="addRow()">
        Add
      </td>
    </tr>
  </tbody>
</table>

推荐阅读