json - Angular 2。将 http 响应映射到具体对象实例

Question

处理http响应的常用方法是这样的:

return this._http.get(url)
           .map((res: Response) => res.json());

它为您提供 Observable<Object[]>其中 Object是从 json 反序列化动态创建的类型。然后你可以在 *ngFor="let item of result | async" 中使用这个结果等等……

我想获得一个特定类型的实例(意味着使用 new 运算符来调用该类型的构造函数)。尝试了不同的方法来实现类似的目标:

.map((res: Response) => { let obj = res.json(); return new MyObject(obj.id, obj.name);})

但出现此错误:Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

这种方法似乎可行，但它太复杂了，可能效果不佳:

.map((res: Response) => {
    let results = <MyObject[]>[];
    let obj = res.json();
    obj.forEach(
        function (o: any) {
            results.push(new MyObject(o.id, o.name));
        }
    );
    return results;
}

谢谢!

Answer 1

如果您知道要从 JSON 中解构什么类型的对象(您可能会这样做)，您可以创建一个从 Object 返回实例的静态方法。

class MyClass {

  prop: number;

  static fromObject(src: Object) {
    var obj = new MyClass();
    obj.prop = src.prop;
    return obj;
  }
}

然后将 JSON 响应转换为 MyClass 的实例:

Rx.Observable.of('[{"prop":1},{"prop":2},{"prop":3}]')
  .map(val => JSON.parse(val))
  .exhaustMap(val => new Rx.Observable.from(val))
  .map(val => MyClass.fromObject(val))
  .subscribe(
    item => console.log('Next: ', item),
    error => console.log('Error:', error),
    _ => console.log('Completed')
  );

这是如何工作的:

1. .map(val => JSON.parse(val))只需将响应转换为对象数组 JSON。

2. .exhaustMap(val => new Rx.Observable.from(val))将每个值转换为 Observable 和 exhaustMap将它们展平，以便 JSON 中的每个对象都将单独发出。

3. .map(val => MyClass.fromObject(val))使用 map再次将每个对象转换为 MyClass 的实例.

查看现场演示:http://jsfiddle.net/f5k9zdh1/1/