Angular 2 observable 不会“映射"到模型 [英] Angular 2 observable doesn't 'map' to model

问题描述

当我学习 Angular 2 时，我使用了一个 observable 通过 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 中什么也没显示.我什至用其他模型 (Message[]) 更改了 Post[] 并且行为没有改变.有人可以解释这种行为吗?

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:

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);
  }
}

如果您使用支持代码完成的编辑器，您可以将 obj 和 array 参数的类型更改为 Post:

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);
  }
}

这篇关于Angular 2 observable 不会“映射"到模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！