i new angular 2. trying list file name in template table selected browser. below code
template.html
<input type="file" id="uploadfile" style="display: none" (change)='onclickuploaddocument($event)' multiple> <label for="uploadfile" class="btn btn-primary">upload documents</label> <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>notes</th><th>action</th></tr></thead> <tbody> <tr *ngfor="let file of files"> <td><input type="checkbox" checked="checked"></td> <td >{{file.name}}</td> <td>dc2352</td> <td><input type="text" class="form-control"></td> <td><input type="text" class="form-control"></td> <td><input type="text" class="form-control"></td> <td> <a href="#"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></a> <a href="#"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> <a href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> </td> </tr> </tbody> </table> component.ts
import {component, oninit, onchanges} '@angular/core'; import {ngclass} '@angular/common'; import {router_directives} '@angular/router-deprecated'; @component({ selector: 'documentmanagement', templateurl: 'app/dashboard/features/documents/documentmanagement/documentmanagementtemplate.html', directives: [router_directives, ngclass] }) export class documentmanagementcomponent implements oninit, onchanges { files: any[]; ngoninit(): void {} ngonchanges(): void {} onclickuploaddocument(event){ console.log("clicked"); var file = event.target.files; console.log(file); (var = 0; < file.length; i++) { var fileinfo = file[i]; console.log(fileinfo); this.files = fileinfo; } } } i getting following error if try apply *ngfor
error
error: cannot find differ supporting object '[object file]' of type 'jellyfish.jpg'. ngfor supports binding iterables such arrays. @ new baseexception (exceptions.ts:14) @ ngfor.object.defineproperty.set [as ngforof] (ng_for.ts:48) @ debugappview._view_documentmanagementcomponent0.detectchangesinternal (documentmanagementcomponent.template.js:386) @ debugappview.appview.detectchanges (view.ts:243) @ debugappview.detectchanges (view.ts:345) @ debugappview.appview.detectviewchildrenchanges (view.ts:267) @ debugappview._view_documentcontrolpanelcomponent3.detectchangesinternal (documentcontrolpanelcomponent.template.js:467) @ debugappview.appview.detectchanges (view.ts:243) @ debugappview.detectchanges (view.ts:345) @ debugappview.appview.detectcontentchildrenchanges (view.ts:261) can tell mistake , solution this? thanks
in onclickuploaddocument set this.files fileinfo instead of pushing array. since files property declared any type, compiler doesn't report error.
*ngfor accepts arrays, error, because @ point, files string (which error tells well).
so solve can edit onclickuploaddocument function this:
... this.files = []; // clear array before pushing values it. (let = 0; < file.length; i++) { let fileinfo = file[i]; console.log(fileinfo); this.files.push(fileinfo); } ... (i used let here because it's considered best practice.) additionally should declare property files "real" type declaration instead using (if not want any) this: files:string[];
hope helps.
