角2可观察到的不“地图”模型 [英] Angular 2 observable doesn't 'map' to model

问题描述

由于我在学习角2我用了一个可观察到的通过API来获取一些数据。像这样的：

As I'm learning Angular 2 I used an observable to fetch some data via an API. Like this:

getPosts() {
        return this.http.get(this._postsUrl)
            .map(res => <Post[]>res.json())
            .catch(this.handleError);
    }

我的岗位模型看起来是这样的：

My post model looks is this:

export class Post {

constructor(
    public title: string,
    public content: string,
    public img: string = 'test') {
}

我现在面临的问题是，地图运营商并没有对Post模型什么。例如，我尝试设置为IMG价值，但在视图中显示post.img没有默认值。我甚至改变了邮政[]与其他模型（消息[]）和行为不会改变。任何人都可以解释这种现象？

The problem I'm facing is that the map operator doesn't do anything with the Post model. For example, I tried setting a default value for the img value but in the view post.img displays nothing. I even changed Post[] with an other model (Message[]) and the behaviour doesn't change. Can anybody explain this behaviour?

推荐答案

我有一个类似的问题时，我想在模板中使用计算的属性。

I had a similar issue when I wanted to use a computed property in a template.

我发现这篇文章的一个很好的解决方案：

I found a good solution in this article:

<一个href=\"http://chariotsolutions.com/blog/post/angular-2-beta-0-somnambulant-inauguration-lands-small-app-rxjs-typescript/\" rel=\"nofollow\">http://chariotsolutions.com/blog/post/angular-2-beta-0-somnambulant-inauguration-lands-small-app-rxjs-typescript/

您创建一个需要对象的数组，然后调用从映射功能，方法对模型的静态方法。在静态方法，你可以然后呼叫你已经定义的构造函数或使用拷贝构造函数：

You create a static method on your model that takes an array of objects and then call that method from the mapping function. In the static method you can then either call the constructor you've already defined or use a copy constructor:

getPosts() {
  return this.http.get(this._postsUrl)
    .map(res => Post.fromJSONArray(res.json()))
    .catch(this.handleError);
}

现有构造

export class Post {
  // Existing constructor.
  constructor(public title:string, public content:string, public img:string = 'test') {}

  // New static method.
  static fromJSONArray(array: Array<Object>): Post[] {
    return array.map(obj => new Post(obj['title'], obj['content'], obj['img']));
  }
}

拷贝构造函数

export class Post {
  title:string;
  content:string;
  img:string;

  // Copy constructor.
  constructor(obj: Object) {
    this.title = obj['title'];
    this.content = obj['content'];
    this.img = obj['img'] || 'test';
  }

  // New static method.
  static fromJSONArray(array: Array<Object>): Post[] {
    return array.map(obj => new Post(obj);
  }
}

如果您使用的是支持code完成一个编辑器，你可以修改 OBJ 和阵列参数发表：

If you're using an editor that supports code completion, you can change the type of the obj and array parameters to Post:

export class Post {
  title:string;
  content:string;
  img:string;

  // Copy constructor.
  constructor(obj: Post) {
    this.title = obj.title;
    this.content = obj.content;
    this.img = obj.img || 'test';
  }

  // New static method.
  static fromJSONArray(array: Array<Post>): Post[] {
    return array.map(obj => new Post(obj);
  }
}

这篇关于角2可观察到的不“地图”模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！