我是 Angular 2 的新手。我有一个表格，单击“添加寄售”选项时，它会添加一个带有序列号和多个输入槽的新行。现在在添加更多寄售（在表中添加更多行的多个输入槽），并在所有这些行中输入信息并提交时，仅返回最后一行的值。有人可以告诉我如何将表中所有多个输入行的值作为一个对象返回吗？谢谢你。
下面是我的代码：
模板
<h4>Consignment Details
<a style="float:right" (click)="onClickAddConsignment()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span>Add Consignment</span>
</a>
</h4>
<form [ngFormModel]="consignmentDetailsForm" (ngSubmit)="onClickSave(consignmentDetailsForm.value)">
<table class="grid" cellpadding="4">
<thead>
<tr>
<th>Serial No.</th>
<th>Consignment ID</th>
<th>Consignment Type</th>
<th>Source</th>
<th>Destination</th>
<th>Pickup Date</th>
<th>Delivery Date</th>
<th>Documents</th>
</tr>
</thead>
<tbody *ngFor="let consignmentSerialNumber of newConsignment; let i=index">
<tr>
<td>
<input type="text" class="form-control" style="display: none" ngControl="serialNumber" ngModel={{consignmentSerialNumber}}>
{{consignmentSerialNumber}}
</td>
<td><input type="text" class="form-control" ngControl="consignmentID"></td>
<td><input type="text" class="form-control" ngControl="consignmentType"></td>
<td><input type="text" class="form-control" ngControl="consignmentSource"></td>
<td><input type="text" class="form-control" ngControl="consignmentDestination"></td>
<td><input type="date" class="form-control" ngControl="pickupDate"></td>
<td><input type="date" class="form-control" ngControl="deliveryDate"></td>
<td>
<label class="btn btn-primary" for="uploadConsignmentDocument">Select Document</label>
<input type="file" id="uploadConsignmentDocument" style="display: none"
(change)='onSelectDocument($event)' (click)='onSelectDocumentIndex(i)' multiple>
<input type="text" class="form-control" style="display: none" [(ngModel)]="fileList[i]" ngControl="document" multiple>
</td>
<td>
<a (click)="removeConsignment(consignmentSerialNumber)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
<br>
<div class="row">
<div class="col-md-4">
<button type="submit" class="btn btn-primary" >Save</button> <button class="btn btn-primary">Cancel</button>
</div>
</div>
</form>
零件
import {Component, OnInit, OnChanges} from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Control } from '@angular/common';
@Component({
selector: 'plan-trip',
templateUrl: 'app/dashboard/features/tripPlanner/planTrip/planTripTemplate.html',
directives: [FORM_DIRECTIVES]
})
export class PlanTripComponent implements OnInit, OnChanges {
newConsignment: any[]=[];
serialNumberCounter: number = 1;
consignmentDetailsForm: ControlGroup;
fileList: any[]=[];
fileIndex: any;
constructor(private _formBuilder: FormBuilder) {
this.consignmentDetailsForm = _formBuilder.group({
'serialNumber': [],
'consignmentID': [],
'consignmentType': [],
'consignmentSource': [],
'consignmentDestination': [],
'pickupDate': [],
'deliveryDate': [],
'document': []
})
}
ngOnInit() {
}
ngOnChanges() {
}
onClickAddConsignment(){
this.newConsignment.push(this.serialNumberCounter++);
}
onSelectDocumentIndex(index){
console.log("index is:..", index)
this.fileIndex = index;
}
onSelectDocument(event){
this.fileList[this.fileIndex] = event.target.files;
console.log("file: ", this.fileList);
}
removeConsignment(consignment: any){
console.log("delete consignment:..", consignment)
var index = this.newConsignment.indexOf(consignment);
this.newConsignment.splice(index, 1)
console.log("total consignments in list:..to remove..", this.newConsignment)
}
onClickSave(consignmentDetailsForm : any[]){
console.log("consignmentDetailsForm are:..", consignmentDetailsForm)
}
}