http 响应对象中没有方法

Question

$http.get 返回的对象没有方法。例子：我有我的 class 型号

export class Lab {

    constructor(
        public id: number,
        public name: string,
        public description: string,
        public isActive: boolean,
        public classes: Classes[]
    ) { }

    isActive(lab: Lab) {
        return this.isActive;
    }
}

在我的服务中，我调用了 http fetching lab

getLab(labId: number) {
    return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId).toPromise();
}

当我在某个组件中得到这个时，方法 isActive 是未定义的，所以调用

lab.isActive();

抛出异常。有什么干净的解决方案吗？

Answer 1

服务器刚刚 returns 数据形成具有定义对象的属性。它实际上并没有创建对象的实例。

尝试这样的事情：

this.lab = Object.assign(new Lab(), this.retrievedLab)

其中this.retrievedLab是服务器返回的数据。

这应该创建对象，然后将任何检索到的属性复制到其中。

Answer 2

在您的 get call 服务中，您可以按照@Deborahk 提到的那样做

getLab(labId: number) {
return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId)
           .map(res => Object.assign(new Lab(), res))
           .toPromise();
 }

Answer 3

你也可以有一个 class 并像这样扩展它：

getLab(labId: number) {
    return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId)
    .pipe(Lab.serializeResponseMap())
    .toPromise();
}

class定义：

export class Lab extends SerializableMap {
    static instanceType = Lab;

    constructor(
        public id: number,
        public name: string,
        public description: string,
        public isActive: boolean,
        public classes: Classes[]
    ) { super(); }

    isActive(lab: Lab) {
        return this.isActive;
    }
}


class SerializableMap {
  static instanceType: any;

  static serializeResponseMap(): any {
    const createInstance = (r) => {
      return Object.assign(new this.instanceType(), r);
    };

    return map((respValue: any) => {
      if (Array.isArray(respValue)) {
        return respValue.map(r => createInstance(r));
      }
      return createInstance(respValue);
    });
  }
}

Answer 4

此版本的灵感来自@Matjaz Hirsman 的回复（感谢！），添加了深度克隆。
另外：它比序列化（或实际上 De 序列化）更像装饰器模式。

getLab(labId: number) {
    return this.http.get<Lab>(DidacticsServiceUrls.apiRoot + labId)
    .pipe(Lab.decoratingMap())
    .toPromise();
}

类:

export class Lab extends Decorable {
    static instanceType = Lab;

    constructor(
        public id: number,
        public name: string,
        public description: string,
        public isActive: boolean,
        public classes: Classes[]
    ) { super(); }

    isActive(lab: Lab) {
        return this.isActive;
    }
}


class Decorable {
  static instanceType: any;

  /**
   * Convert single entity into fully-fledged object
   * @param source js object
   * @return fully-fledged HalResource
   */
  static decorateSingle(source: any) {
    const target = new this.instanceType();
    for (const key in target) {
      if (source[key]) {
        if (target[key] && typeof target[key] === 'object') {
          target[key] = Object.assign(target[key], source[key]);
        } else {
          target[key] = source[key];
        }
      }
    }
    return target;
  };

  /**
   * Convert entity or array of entities into fully-fledged objects
   * @param response js object (or objects)
   * @return fully-fledged object (or objects)
   */
  static decorate(response: any) {
    if (Array.isArray(response)) {
      return response.map(element => this.decorateSingle(element))
    } else {
      return this.decorateSingle(response);
    }
  }

  /**
   * Rx Map operator decorating the JS objects into fully-fledged objects
   */
  static decoratingMap() {
    return map((response: any) => this.decorate(response));
  }
}

http 响应对象中没有方法

No methods in http response object

angular-http

angular