Angular 2從上傳的文件列表中刪除文件

Question

我是angular 2.的新手。我上傳文件並在模板中顯示它們。當我按刪除時檢查複選框，它不會從列表中刪除所需的文件。下面是我的代碼

模板

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> 
<table cellpadding="4" class="grid" > 
<thead><tr><th></th><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> 
<tbody *ngFor="let file of files"> 
    <tr > 
    <td class="form-group"><input type="checkbox" [checked]="checked"></td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="file.name">{{file.name}}</td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="documentId"></td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="type"></td> 
    <td class="form-group"><input type="text" class="form-control" ngControl="source"></td> 
<td class="form-group"><input type="date" class="form-control" ngControl="date"></td> 
<td class="form-group"><input type="text" class="form-control" ngControl="tripId"></td> 
<td class="form-group"><input type="text" class="form-control" ngControl="notes"></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 } 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 { 


    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){ 

    } 

    ngOnInit(): void { 
     this._fleetService.getFleets() 
      .subscribe(
       fleets => { 
        this.trucks = fleets 
       }, 
       error => this.errorMessage = <any>error) 
    } 

    ngOnChanges(): void { 

    } 

    onClickUploadDocument(event){ 
     console.log("clicked") 
     var file = event.target.files; 

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

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

    } 

    } 

    remove(file: any){ 

     console.log("delete file:..", file) 
     if (this.checked == true) { 
       this.files.splice(file) 
     } 


    } 

} 

有人能告訴我我的錯誤代碼，併爲我提供了一個解決方案。

Answer 1

回答上述問題

remove(file: any){ 

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

      var index = this.files.indexOf(file); 
     this.files.splice(index, 1) 

    }