通过Angular的HttpClient检索的映射/隐藏对象[副本]

Question

也许用一个例子来解释更好。

我有以下课程：

export class Foo {
    bar: string;

    doSomething() {
        // whatever
    }
}

以及以下提供商：

@Injectable()
export class FooProvider {

  constructor(private http: HttpClient) {

  }

  getFoos(): Observable<Foo[]> {
    return this.http.get<Foo[]>('/foos')
  }

}

当订阅< code>Observable时，我希望数据是< code>Foo对象的实际数组。但令我惊讶的是，数组中的对象是简单的javascript对象，只有数据，没有方法(实际上，当试图在其中任何一个对象中执行< code>doSomething()时，都会出现< code >不是函数错误)。

我能够做到这一点的唯一方法是像这样映射可观察量：

@Injectable()
export class FooProvider {

  constructor(private http: HttpClient) {

  }

  getFoos(): Observable<Foo[]> {
    return this.http.get<Foo[]>('/foos')
        .map(foos => {
            foos.map(foo => {
                let f = new Foo();
                Object.assign(f, foo);
                return f;
            };
        });
  }

}

问题是，我不想在每个提供商的每种方法中都这样做。看到执行转换的代码非常简单，我猜我错过了一些东西，但我无法在文档中找到它。

有人能帮我吗？

Answer 1

就像@tos kv所说，您需要手动创建对象。尽管标记为重复的两个答案都可以解决OP，但我想添加这个答案，因为我通常会做一些不同的事情。

所有答案都使用Object.assign（f， foo）；将属性从普通对象复制到类实例。没关系，但在我的情况下，我希望对应用程序中使用的属性的名称有更多的控制权。为什么？所以如果api返回一个属性username，但随后它被更改并且相同属性的名称是fullname，我不想更新应用程序中使用该属性的所有页面。

因此，我通常会创建一些静态方法，如下所示：

export class Foo {
    bar: string;

    doSomething() {
        // whatever
    }

    // Static method that creates the instance from 
    // a plain javascript object
    public static fromObject(object: any): Foo {
        let instance = new Foo();

        if(!object) return instance;

        // Here you can decide which name should each property have. 
        // If the API changes in the future, you would only need to 
        // modify a single line of code and that's it. You could also
        // modify each property and give it a specific format if you want
        instance.bar = object.bar;

        // more properties ...

        return instance;
    }

    // Static method that creates a list of instances from a list 
    // of plain javascript objects
    public static fromJsonList(objectList: Array<any>): Array<Foo> {
        let instances = new Array<Foo>();

        if (!objectList || (objectList && objectList.length === 0)) return Foo;

        objectList.forEach(object => instances.push(Foo.fromJson(object)));

        return instances;
    }
}

然后，我在服务中使用它：

getFoos(): Observable<Foo[]> {
    return this.http.get<Foo[]>('/foos').map(response => Foo.fromJsonList(response));
}

因此，通过做这样的事情：

1. 如果任何属性的名称发生更改，则需要更改一行代码，每个页面仍将正常工作。
2. 与应如何创建每个实例相关的所有“逻辑”都封装在模型中，而不是在服务中添加部分实例。