Angular 2 benutzerdefinierte Formulareingabe: Kann nicht lesen Eigenschaft ‚subscribe‘ undefinierter

Question

Ich versuche, eine benutzerdefinierte Formulareingabe für das Hochladen von Dateien in Winkeln 2 basierend erstellen zu diesem Beitrag Angular 2 custom form input aber ich folgende Fehler irren

zone.js:446 Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined(…)

mein Code

import { 
    Component, 
    Directive, 
    EventEmitter, 
    Provider, 
} from 'angular2/core'; 

import { NG_VALUE_ACCESSOR } from 'angular2/common'; 
import { CONST_EXPR } from 'angular2/src/facade/lang'; 
import { forwardRef } from 'angular2/src/core/di'; 

@Component({ 
    selector: 'file-upload', 
    template: `<div 
class="drop-zone" 
(dragover)="dragover = true" 
(dragleave)="dragover = false" 
(drop)="handleFiles($event); $event.preventDefault();" 
[ngClass]="{'dragover':dragover}" 
> 
    Drop file here 
</div> 
<input type="file" (change)="handleFiles($event)" id="fileup"> <label for="fileup" class="button">Upload File</label> 
<br>`, 
    styles: [require('./file-upload.component.sass')], 
    outputs: ['fileChange'], 
}) 
export class FileUploadComponent { 
    constuctor() { 
    this.fileChange = new EventEmitter(false); 
    } 
    setValue(value) { 
    this.image = value; 
    } 
    handleFiles(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    const files = event.target.files || event.dataTransfer.files; 
    const file = files[0]; 

    const reader = new FileReader(); 
    reader.onload = (e) => { 
     this.fileChange.emit(e.target.result); 
    }; 
    reader.readAsBinaryString(file); 
    } 
} 

const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
    NG_VALUE_ACCESSOR, { 
    useExisting: forwardRef(() => FileUploadValueAccessor), 
    multi: true, 
    })); 

@Directive({ 
    selector: 'file-upload', 
    host: { 
    '(fileChange)': 'onChange($event)', 
    }, 
    providers: [CUSTOM_VALUE_ACCESSOR], 
}) 
export class FileUploadValueAccessor { 
    static get parameters() { 
    return [[FileUploadComponent]]; 
    } 
    constructor(host) { 
    this.host = host; 
    this.onChange =() => {}; 
    this.onTouched =() => {}; 
    } 

    writeValue(value) { 
    this.host.setValue(value); 
    } 

    registerOnChange(fn) { 
    this.onChange = fn; 
    } 
    registerOnTouched(fn) { 
    this.onTouched = fn; 
    } 
} 

Answer 1

ich die Lösung gefunden, das Problem war, dass ich einen Tippfehler „Konstruktor“ hatte sollte „Konstruktor“ so der Ausgang seinen filechange wurde nicht definiert.