0

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

模板.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>

组件.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)

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

4

1 回答 1

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[];

希望能帮助到你。

于 2016-06-06T20:27:16.530 回答