Angular2例外：nullのプロパティ 'off'を読み取ることができません。

Question

これを引き起こす可能性はありません。それはサードパーティのプラグインかもしれないように見えます。

データを保存し、その親に発する

export class MenuTableSelectedFormComponent implements OnInit { 

    @Input() public selectedMenu: Menu; 
    @Output() public selectedMenuChange = new EventEmitter(); 

    @Output() updatePage = new EventEmitter(); 

    constructor() { } 

    ngOnInit() { } 

    updateMenuPage($event) { 
     // update the parent 
     this.updatePage.emit($event); 
    } 

} 

に発する私のX-編集可能なコンポーネント

declare var $: any; 

@Component({ 
    selector: 'x-editable', 
    template: '<a attr.id="{{widgetId}}" class="{{className}}"><ng-content></ng-content>{{model }}</a>' 
}) 
export class XEditableComponent implements OnInit, AfterContentChecked { 

    @Input() model: any = ''; 
    @Output() modelChange = new EventEmitter(); 
    @Input() Name: string = ''; 
    @Input() type: any = 'text'; 
    @Input() value: any; 
    @Input() pk: any; 

    @Output() change = new EventEmitter(); 

    public widgetId: any; 
    public widgetsCounter = 0; 

    private _options: any; 

    constructor(private el: ElementRef) { 
    this.widgetId = 'x-editable' + this.widgetsCounter++; 
    } 

    ngOnInit() { 
    this.render(); 
    } 

    ngAfterContentChecked() { 
    if (this._options && ['type', 
     'placement', 
     'mode', 
     'value', 
     'disabled', 
     'placeholder', 
     'originalTitle', 
     'source', 
     'showbuttons', 

     'template', 
     'viewformat', 
     'format', 
     'pk', 
    ].some((it) => { 
     return this._options[it] !== this[it]; 
    })) { 
     this.render(); 
    } 

    } 

    render() { 
    let element = $(this.el.nativeElement); 
    let options = { 
     type: this.type, 
     placement: this.placement, 
     mode: this.mode, 
     value: this.value, 
     disabled: this.disabled, 
     placeholder: this.placeholder, 
     originalTitle: this.originalTitle, 
     source: this.source, 
     showbuttons: this.showbuttons, 
     template: this.template, 
     viewformat: this.viewformat, 
     format: this.format, 
     pk: this.pk, 
    }; 

    element.editable('destroy'); 
    element.editable(options); 

    element.on('save', (e, params) => { 
     this.model = params.newValue; 
     this.modelChange.emit(params.newValue); 

     let data = {}; 
     data['id'] = this.pk; 
     data[this.Name] = params.newValue; 

     this.change.emit(data); 
    }); 

    this._options = options; 
    } 
} 

は（要求を行う）

export class MenuTableListComponent { 

    @Input() public menus: any; 
    @Input() public selectedMenu: Menu; 
    @Output() public selectedMenuChange = new EventEmitter(); 
    @Output() public showForm = new EventEmitter(); 


    /** 
    * @param $event - data from the child component for updating the model 
    */ 
    updateMenuPage($event) { 
     let id = $event.id; 
     delete $event['id']; 

     // save the data here 
     this.page.update(id, $event) 
      .subscribe(res => { 
       this.notify.success('Menu Saved', 'Menu saved successfully!'); 
      }); 
    }  
} 

私は」私のhttp要求を処理するためにangular2-jwtを使用します。残りは、angle2-jwtを介してhttpリクエストを実行する私自身のサービスです。

特に、このエラーは、x編集可能なコンポーネントでデータ（this.change.emit（$ event））を発行したときに発生します。私はx-editableコンポーネントを完全に削除し、[（ngModel）]で入力フィールドを定期的にバインドしています。同じエラーが表示され、バインディングはここでは問題ではないと思います。

TypeError: Cannot read property 'off' of null 
    at eval (eval at module.exports (addScript.js:9), <anonymous>:6:28424) 
    at HTMLDivElement.d (eval at module.exports (addScript.js:9), <anonymous>:6:25567) 
    at HTMLDivElement.e (eval at module.exports (addScript.js:9), <anonymous>:3:5222) 
    at HTMLDivElement.handle (eval at module.exports (addScript.js:9), <anonymous>:6:1043) 
    at HTMLDivElement.dispatch (eval at module.exports (addScript.js:9), <anonymous>:3:7537) 
    at HTMLDivElement.r.handle (eval at module.exports (addScript.js:9), <anonymous>:3:5620) 
    at Object.trigger (eval at module.exports (addScript.js:9), <anonymous>:4:4818) 
    at HTMLDivElement.eval (eval at module.exports (addScript.js:9), <anonymous>:4:5328) 
    at Function.each (eval at module.exports (addScript.js:9), <anonymous>:2:2861) 
    at n.fn.init.each (eval at module.exports (addScript.js:9), <anonymous>:2:845) 
    at n.fn.init.trigger (eval at module.exports (addScript.js:9), <anonymous>:4:5304) 
    at e (eval at module.exports (addScript.js:9), <anonymous>:6:743) 
    at ZoneDelegate.invokeTask (zone.js:275) 
    at Object.onInvokeTask (ng_zone.js:262) 
    at ZoneDelegate.invokeTask (zone.js:274) 

事は、このエラーは私に間違ったインポートとは何かを探しますでしょうか？

Answer 1

これが原因だとわかりませんが、私はAfterContentChecked実装を削除して修正できました。私は、もはやエラーを取得しています

declare var $: any; 

@Component({ 
    selector: 'x-editable', 
    template: '<a attr.id="{{widgetId}}" class="{{className}}"><ng-content></ng-content>{{model }}</a>' 
}) 
export class XEditableComponent implements OnInit { 

    @Input() model: any = ''; 
    @Output() modelChange = new EventEmitter(); 

    @Input() Name: string = ''; 

    @Input() type: any = 'text'; 
    @Input() placement: any; 
    @Input() value: any; 
    @Input() mode: any; 
    @Input() disabled: any = false; 
    @Input() placeholder: any; 
    @Input() originalTitle: any; 
    @Input() source: any; 
    @Input() showbuttons: any; 
    @Input() template: any; 
    @Input() viewformat: any; 
    @Input() format: any; 
    @Input() className: any; 
    @Input() pk: any; 

    @Output() change = new EventEmitter(); 

    public widgetId: any; 
    public widgetsCounter = 0; 

    private _options: any; 

    constructor(private el: ElementRef) { 
    this.widgetId = 'x-editable' + this.widgetsCounter++; 
    } 

    ngOnInit() { 
    this.render(); 
    } 

    render() { 
    let element = $(this.el.nativeElement); 
    let options = { 
     type: this.type, 
     placement: this.placement, 
     mode: this.mode, 
     value: this.value, 
     disabled: this.disabled, 
     placeholder: this.placeholder, 
     originalTitle: this.originalTitle, 
     source: this.source, 
     showbuttons: this.showbuttons, 
     template: this.template, 
     viewformat: this.viewformat, 
     format: this.format, 
     pk: this.pk, 
    }; 

    element.editable('destroy'); 
    element.editable(options); 

    element.on('save', (e, params) => { 
     this.model = params.newValue; 
     this.modelChange.emit(params.newValue); 

     let data = {}; 
     data['id'] = this.pk; 
     data[this.Name] = params.newValue; 

     this.change.emit(data); 
    }); 

    this._options = options; 
    } 
} 

...

Answer 2

テンプレートが[attr.id]の代わりにattr.idである必要があります。 Like：

template: '<a [attr.id]="{{widgetId}}" class="{{className}}"><ng-content></ng-content>{{model }}</a>'