Angular2 ИСКЛЮЧЕНИЕ: Невозможно прочитать свойство «выключено» от нуля

Question

Я понятия не имею, что может быть причиной этого. похоже, что это может быть сторонний плагин.

мой х-редактируемый компонент

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 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); 
    } 

} 

, выдающим его родителя, который сохраняет данные (делает запрос)

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!'); 
      }); 
    }  
} 

Я m используя angular2-jwt для обработки моих HTTP-запросов. остальные - мои собственные службы, которые запускают HTTP-запрос через angular2-jwt.

В частности, эта ошибка возникает, когда я испускаю данные (this.change.emit ($ event)) в x-редактируемом компоненте. то снова, я полностью удалил x-редактируемый компонент и просто регулярно привязывал поле ввода с помощью [(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, 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); 

после:

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. Вроде:

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