angularjs - Angular 2 delete a file from uploaded list of files -

i new angular 2. uploading files , displaying them in template. on checking checkbox when press delete, not deleting required file list. below code

template

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

component

import {component, oninit, onchanges} '@angular/core'; import {ngclass, form_directives } '@angular/common'; import {router_directives} '@angular/router-deprecated'; import {fleetservice} '../../fleet/fleetcontrolpanel/fleetcontrolpanelservice'; import {documentmanagementservice} './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 loop products in product service file , 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);      (let = 0; < 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)          }        }  } 

can please tell me mistake in code , provide me solution.

answer above problem

remove(file: any){           console.log("delete file:..", file)            var index = this.files.indexof(file);         this.files.splice(index, 1)       }