从 Angular table 中的特定列收集数据

Collect data from a particular column in Angular table

我有一个 table,它使用一个数组来填充它的行。 “值”列具有用于插入一些数据的输入字段。那么我需要知道的是如何在插入数据后收集“值”列上的所有数据?我可以使用“formGroup”吗,或者有类似的东西吗?请注意,行数总是根据数组大小而变化。非常感谢您的帮助。谢谢。

Component.ts 文件

export class AppComponent {
 members = [
   {
     dataLimit: 'Package 1: Voice',
     value: 0,
     uom: 'Minutes',
   },
   {
     dataLimit: 'Package 2: SMS',
     value: 0,
     uom: 'Units',
   },
 ];
}

HTML 文件

<div>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>Value</th>
        <th>Unit of Mesure</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let member of members">
        <td>{{ member.dataLimit }}</td>
        <td><input type="text" value="{{ member.value }}" /></td>
        <td>{{ member.uom }}</td>
      </tr>
    </tbody>
  </table>
</div>

你完全正确!我给你留下了代码 运行 一个获取 STACKBLITZ 中的值的表单,这样你就可以验证它并轻松地进行测试。

就像你说的,你可以使用 FormGroup 来实现,使用 Angular ReactiveForm:

  1. 首先,确保您已将 ReactiveForm 模块加载到您想要表单(在您的示例中为 AppComponent)的组件的模块(在您的示例中为 AppModule):
import { ReactiveFormsModule } from '@angular/forms';  
@NgModule({  
imports: [  
 // other imports ...  
ReactiveFormsModule  
 ],  
})  
export class AppModule { }
  1. 在您的组件中,声明您的表单并“构建”它,为您的 table:
  2. 的每一行动态生成一个字段
import { Component, OnInit, VERSION } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  form: FormGroup;

  members = [
    {
      dataLimit: 'Package 1: Voice',
      value: 0,
      uom: 'Minutes',
    },
    {
      dataLimit: 'Package 2: SMS',
      value: 0,
      uom: 'Units',
    },
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    const myFields = this.buildFormFieldsFormGroup();
    console.log('myFields: ', myFields);

    this.form = myFields;
  }

  private buildFormFieldsFormGroup(): FormGroup {
    const membersLength = this.members.length;
    let response: FormGroup = this.fb.group({ dummy: ['', []] });

    for (let i = 0; i < membersLength; i++) {
      response.addControl(`field${i}`, new FormControl());
    }
    console.log('response: ', response);

    return response;
  }
}
  1. 将表单和表单控件添加到您的 HTML:
<div>
  <form [formGroup]="form">
<table>
  <thead>
    <tr>
      <th></th>
      <th>Value</th>
      <th>Unit of Mesure</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let member of members, let i=index">
      <td>{{ member.dataLimit }}</td>
      <td><input type="text" value="{{ member.value }}" formControlName="field{{i}}" /></td>
      <td>{{ member.uom }}</td>
    </tr>
  </tbody>
</table>
</form>
</div>
  1. 如果您想测试它是否正常工作,请在 HTML:
  2. 的末尾添加
FORM VALUE: {{ form.value | json }}

因此,当您在 table 中插入一些值时,您会在相应的字段中看到它的值,如下图所示:

您拥有表单中第一行的值,在其“field0”字段中,依此类推... (注意:我在表单中保留了 'dummy' 字段,因为我需要它来创建“种子”表单,以便快速响应......当我有时间时,我将改进创建表单的代码而不使用它,但现在,它不会打扰并且表格功能齐全)