返回多个对象Angular 2表格

Question

我是angular 2.的新手。在上传两个或多个文档时，它会在模板中列出。列出的每一行文档都有用于输入附加信息的输入插槽。提交时，仅在文档列表最后一行输入的值将作为对象返回。我想要返回文档列表中输入的所有行的值。下面是我的代码

模板

<h1 class="separator">Manage Documents</h1> 
<!-- in transit --> 
<div class="row"> 
<div class="col-xs-2"> 
<input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple> 
<label for="uploadFile" class="btn btn-primary">Upload Documents</label> 

</div> 

<div class="col-xs-6"> 
<input type="button" value="Select Truck To Send Document" class="btn btn-primary" data-toggle="modal" data-target="#selectTruck"> 
</div> 
</div> 


<table cellpadding="4" class="grid" > 
<thead><tr><th>Document Name</th><th>Document ID</th><th>Document Type</th><th>Source</th> 
<th>Document Date</th><th>Trip ID</th><th>Notes</th><th>Action</th></tr></thead> 

<form [ngFormModel]="myform" (ngSubmit)="onSubmit(myform.value)"> 
<tbody *ngFor="let file of files"> 
    <tr > 
    <td class="form-group" >{{file.name}}</td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="documentId" #documentId="ngForm"></td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="type" #type="ngForm"></td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="source" #source="ngForm"></td> 
    <td class="form-group"><input type="date" class="form-control" ngControl="date" #date="ngForm"></td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="tripId" #tripId="ngForm"></td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="notes" #notes="ngForm"></td> 
     <td class="form-group"> 
      <a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 

     </td> 
    </tr> 

</tbody> 

</table> 
<!-- save button --> 
<button type="submit" class="form-group" class="btn btn-primary " >Save</button> 
</form> 

组件

import {Component, OnInit, OnChanges} from '@angular/core'; 
    import {NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder } from '@angular/common'; 
    import {ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
    import {FleetService} from '../../fleet/fleetControlPanel/fleetControlPanelService'; 
    import {DocumentManagementService} from './documentManagementService'; 

    @Component({ 
     selector: 'documentManagement', 
     templateUrl: 'app/dashboard/features/documents/documentManagement/documentManagementTemplate.html', 
     directives: [ROUTER_DIRECTIVES, NgClass, FORM_DIRECTIVES ] 
    }) 

    export class DocumentManagementComponent implements OnInit, OnChanges { 

     myform: ControlGroup; 
     file: any[]; 
     files: any[] = []; 
     trucks: any[]; 
     errorMessage: any; 
     checked: boolean ; 

     // constructor to loop the products in product service file and disply in html 
     constructor(private _fleetService: FleetService, private _documentManagementService: DocumentManagementService, 
      _formBuilder: FormBuilder){ 

      this.myform = _formBuilder.group({ 
       'documentId': [], 
       'type': [], 
       'source': [], 
       'date': [], 
       'tripId': [], 
       'notes': [] 
      }) 
     } 

     ngOnInit(): void { 

     } 

     ngOnChanges(): void { 

     } 

     onClickUploadDocument(event){ 
      console.log("clicked") 
      let fileList: FileList = event.target.files; 

     console.log("file: ",fileList); 
     for (let i = 0; i < fileList.length; i++) { 
      var files = fileList[i]; 
      console.log("files are: ",files); 
      this.files.push(files); 

     } 
     } 

     remove(file: any){ 

      console.log("delete file:..", file) 

       var index = this.files.indexOf(file); 
      this.files.splice(index, 1) 
      console.log("total files in list:..", this.files) 

     } 

     onSubmit (documents: any) { 
      console.log("returned objects are:..", documents) 

     } 
    } 

是否有人可以帮助我如何返回所有的文件输入插槽输入的值。谢谢。

Answer 1

每行绑定到相同的控件实例。您需要将每个绑定到他们自己的实例。

<tbody *ngFor="let file of files let i=index"> 
    <tr > 
    <td>{{file.name}}</td> 
    <td><input type="text" ngControl="documentId{{i}}" #documentId="ngForm"></td> 
    <td><input type="text" ngControl="type{{i}}" #type="ngForm"></td> 
    <td><input type="text" ngControl="source{{i}}" #source="ngForm"></td> 
    <td><input type="date" ngControl="date{{i}}" #date="ngForm"></td> 
    <td><input type="text" ngControl="tripId{{i}}" #tripId="ngForm"></td> 
    <td><input type="text"ngControl="notes{{i}}" #notes="ngForm"></td> 
     <td> 
      <a (click)="remove(file)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
     </td> 
    </tr> 
</tbody> 

 this.myform = _formBuilder.group({ 
     }) 

     this.files.forEach((f, i) => { 
      this.myForm.addControl('documentId' + i, new Control()), 
      this.myForm.addControl('type' + i, new Control()), 
      this.myForm.addControl('source' + i, new Control()), 
      this.myForm.addControl('date' + i, new Control()), 
      this.myForm.addControl('tripId' + i, new Control()), 
      this.myForm.addControl('notes' + i, new Control()), 
     }) 

当this.files被更新（项目添加或删除），则也this.form需要更新。

您可能会考虑将每行包装在组件中，并将其用作控件以使代码更简单。该组件需要实现ControlValueAccessor像例如Not getting updated value from model in events when implementing value accessor for custom controls