列出模板中选择的文件 table angular 2

Question

我是 angular 的新手 2. 尝试列出从浏览器中选择的模板 table 中的文件名。下面是我的代码

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} from '@angular/core';
import {NgClass} from '@angular/common';
import {ROUTER_DIRECTIVES} from '@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);
        for (var i = 0; i < file.length; i++) {
            var fileInfo = file[i];
            console.log(fileInfo);
            this.files = fileInfo;
        } 

    }
}

如果我尝试应用 *ngFor

，我会收到以下错误

错误

Error: Cannot find a differ supporting object '[object File]' of type 'Jellyfish.jpg'. NgFor only supports binding to Iterables such as Arrays.
        at new BaseException (exceptions.ts:14)
        at NgFor.Object.defineProperty.set [as ngForOf] (ng_for.ts:48)
        at DebugAppView._View_DocumentManagementComponent0.detectChangesInternal (DocumentManagementComponent.template.js:386)
        at DebugAppView.AppView.detectChanges (view.ts:243)
        at DebugAppView.detectChanges (view.ts:345)
        at DebugAppView.AppView.detectViewChildrenChanges (view.ts:267)
        at DebugAppView._View_DocumentControlPanelComponent3.detectChangesInternal (DocumentControlPanelComponent.template.js:467)
        at DebugAppView.AppView.detectChanges (view.ts:243)
        at DebugAppView.detectChanges (view.ts:345)
        at DebugAppView.AppView.detectContentChildrenChanges (view.ts:261)

谁能告诉我这是什么错误以及解决方法？谢谢

Answer 1

在您的 onClickUploadDocument 中，您将 this.files 设置为 fileInfo 而不是将其推送到您的数组。由于您的 files 属性被声明为 any 类型，因此您的编译器不会将此报告为错误。

*ngFor 只接受数组，所以你会得到这个错误，因为在这一点上，files 只是一个字符串（错误也告诉你）。

所以要解决这个问题，您可以像这样编辑 onClickUploadDocument 函数：

...

this.files = []; // clear the array before pushing your values into it.

for (let i = 0; i < file.length; i++) {
     let fileInfo = file[i];
     console.log(fileInfo);
     this.files.push(fileInfo);
}

...

（我在这里使用 let 因为它被认为是最佳实践。）此外，您应该使用 "real" 类型声明来声明您的属性 files，而不是使用 any（如果您不是绝对希望它是 any），如下所示：files:string[];

希望对您有所帮助。

列出模板中选择的文件 table angular 2

List the selected files in template table angular 2

angular2-template

ngfor

angular2-components

angular