列出模板表角度2中的选定文件答案

【问题标题】：List the selected files in template table angular 2列出模板表角度2中的选定文件
【发布时间】：2016-10-06 13:40:27
【问题描述】：

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

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)

有人能说出错误和解决方法吗？谢谢

【问题讨论】：

标签： angular angular2-template ngfor angular2-components

【解决方案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，因为它被认为是最佳实践。）此外，您应该使用“真实”类型声明来声明您的属性files，而不是像这样使用任何（如果您不确定它是any）：files:string[];

希望对你有帮助。

【讨论】：