代码之家 › 专栏 › 技术社区 › Omar

角度6:在catch=>errHandler[duplicate]中访问“this”

typescript angular javascript

0

Omar · 技术社区 · 7 年前

我的服务

import { Injectable } from '@angular/core';
import { _log, notice, SnotifyService } from '../utils';


@Injectable()
export class ConfigsService {

    constructor( public notice: SnotifyService )  {}

    addProductModifier(data) {
        this.notice.warning(show); // works finf
        return this.http.get<any>( api_url + '/addProductModifier', {params: data} ).catch(this.errHandler);
    }

    errHandler(error: HttpErrorResponse) {
        let show = error.error.formatted || error.statusText;
        _log(show, 'e');
        this.notice.warning(show); // Cannot read property 'warning' of undefined
        return Observable.throw(error.error || "unknown error");
    }

}

问题

在上面的代码中可以看到 this

1 回复 | 直到 7 年前

1

0

Titian Cernicova-Dragomir 7 年前

当你经过的时候 errHandler catch 您只传递函数,而不是它的关联函数 this 这 将由调用者决定(在本例中是可观察的)。这是函数在Javascript中的行为方式,甚至类方法也不绑定到特定的对象实例。

最简单的解决方案是转换到箭头函数( => )它抓住了从声明上下文:

@Injectable()
export class ConfigsService {

    constructor( public notice: SnotifyService )  {}

    addProductModifier(data) {
        this.notice.warning(show); // works finf
        return this.http.get<any>( api_url + '/addProductModifier', {params: data} ).catch(this.errHandler);
    }

    errHandler = (error: HttpErrorResponse) => {
        let show = error.error.formatted || error.statusText;
        _log(show, 'e');
        this.notice.warning(show); // Cannot read property 'warning' of undefined
        return Observable.throw(error.error || "unknown error");
    }

}

bind 当您将函数传递给

addProductModifier(data) {
    this.notice.warning(show); // works finf
    return this.http.get<any>( api_url + '/addProductModifier', {params: data} ).catch(this.errHandler.bind(this));
}