Angular 2 löschen Sie eine Datei aus hochgeladenen Liste der Dateien

Question

Ich bin neu in eckigen 2. Ich lade Dateien und zeige sie in der Vorlage. Wenn ich das Kontrollkästchen aktiviere, wenn ich auf Löschen klicke, wird die erforderliche Datei nicht aus der Liste gelöscht. Unten ist mein Code

Vorlage

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

Komponente

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


    } 

} 

Kann meinen Fehler im Code jemand bitte sagen Sie mir und gibt mir eine Lösung.

Answer 1

Antwort auf das oben beschriebene Problem

remove(file: any){ 

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

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

    }