从 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:
- 首先,确保您已将 ReactiveForm 模块加载到您想要表单(在您的示例中为 AppComponent)的组件的模块(在您的示例中为 AppModule):
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }
- 在您的组件中,声明您的表单并“构建”它,为您的 table:
的每一行动态生成一个字段
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;
}
}
- 将表单和表单控件添加到您的 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>
- 如果您想测试它是否正常工作,请在 HTML:
的末尾添加
FORM VALUE: {{ form.value | json }}
因此,当您在 table 中插入一些值时,您会在相应的字段中看到它的值,如下图所示:
您拥有表单中第一行的值,在其“field0”字段中,依此类推...
(注意:我在表单中保留了 'dummy' 字段,因为我需要它来创建“种子”表单,以便快速响应......当我有时间时,我将改进创建表单的代码而不使用它,但现在,它不会打扰并且表格功能齐全)
我有一个 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:
- 首先,确保您已将 ReactiveForm 模块加载到您想要表单(在您的示例中为 AppComponent)的组件的模块(在您的示例中为 AppModule):
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// other imports ...
ReactiveFormsModule
],
})
export class AppModule { }
- 在您的组件中,声明您的表单并“构建”它,为您的 table: 的每一行动态生成一个字段
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;
}
}
- 将表单和表单控件添加到您的 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>
- 如果您想测试它是否正常工作,请在 HTML: 的末尾添加
FORM VALUE: {{ form.value | json }}
因此,当您在 table 中插入一些值时,您会在相应的字段中看到它的值,如下图所示:
您拥有表单中第一行的值,在其“field0”字段中,依此类推... (注意:我在表单中保留了 'dummy' 字段,因为我需要它来创建“种子”表单,以便快速响应......当我有时间时,我将改进创建表单的代码而不使用它,但现在,它不会打扰并且表格功能齐全)