Question

我已经按照这个简单的例子，我如何在我的组件中传递upload-file。 How to make FileReader work with Angular2

我的component.html文件如下所示：

<div class="col-md-6">
     <div>
       Select file:
       <input type="file" (change)="changeListener($event)">
     </div>
</div>

和我的component.ts文件

import {Component, Input, EventEmitter, Output} from "@angular/core";
import {Router, ROUTER_PROVIDERS} from '@angular/router'
import { FormBuilder, FORM_DIRECTIVES } from '@angular/common';

@Component({

    moduleId: module.id,
    selector: 'edit-task',
    templateUrl: 'task.component.html',
    directives: [BlueFontDirective],
    providers: [ROUTER_PROVIDERS]
})
export class TaskFormat{


     //onChange file listener
    changeListener($event) : void {
        console.log('TRRRIIIGERT');
    }

}

当我选择某个文件时，我收到错误：

browser_adapter.ts:78ORIGINAL EXCEPTION：TypeError： self.context.changeListener不是 functionBrowserDomAdapter.logError @ browser_adapter.ts:78 browser_adapter.ts:78ORIGINAL STACKTRACE：BrowserDomAdapter.logError @ browser_adapter.ts：78

更新

我只是尝试了别的东西。我的html模板看起来像这样：

 <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
        <button type="button" (click)="upload()">Upload</button>

当我选择任何文件并单击selection-promt中的“打开”按钮时，我也会收到错误，也不会触发我的angular2-backend中的某些内容：

browser_adapter.ts:78 TypeError: self.context.fileChangeEvent is not a function
    at _View_TaskFormat0._handle_change_9_0 (TaskFormat.template.js:698)
    at eval (view.ts:374)
    at eval (dom_renderer.ts:308)
    at eval (dom_events.ts:16)
    at ZoneDelegate.invoke (zone.js:232)
    at Object.onInvoke (ng_zone_impl.ts:67)
    at ZoneDelegate.invoke (zone.js:231)
    at Zone.runGuarded (zone.js:128)
    at NgZoneImpl.runInnerGuarded (ng_zone_impl.ts:100)
    at NgZone.runGuarded (ng_zone.ts:216)

当我选择任何文件时，会触发“FileChangeEvent”，但会抛出错误...

输入文件无法识别Angular 2中的listnerFunction

0 个答案: