javascript - Angular 2 Array 打印在控制台上但无法在屏幕上打印对象属性

Question

我在我创建的服务中有以下方法:

  getPost(nid: string): Observable<Post[]>{
    let url = "http://test.co.uk/api/v1/basic/" + nid;
    return this.http.get(url,  {headers: this.headers}).map(res => res.json() as Post).catch(err => {

      return Observable.throw(err);
    });
  }

这是我的组件类:

export class PostDetailComponent implements OnInit {
  posts: Post[] = [];
  post: Post = new Post();
  constructor(
private route: ActivatedRoute,
private postService: PostService
) { }
  ngOnInit() {

    this.route.params.switchMap((params: Params) => {
      let nid = params ['nid'];
      return this.postService.getPost(nid);  }).subscribe(res => {
      console.log(res)
      this.post = res as Post;
    }, err =>{
      console.log(err);
  });

  }

}

JSON 提要如下所示(是数组中的一个对象):

  [  
   {  
      "nid":"3",
      "title":"When Unity meets Vuforia",
      "body":"<p>Unless you have been living under a rock in the past 7 - ...",
      "uid":"admin",
      "path":"\/node\/3",
      "field_article_image":"http:\/\/test.co.uk\/sites\/default\/files\/when-unity-meets-vuforia_0.jpg?itok=BGYaotay"
   }
]

所以在我的模板中，如果我打印 {{post}}，我会在屏幕上得到 [object Object]。

如果我打印 {{post | json}} 我得到行 JSON 提要。

最后，如果我打印 {{post.title}} 或 {{post?.title}} 我什么也得不到。

我还有一个看起来像这样的类帖子:

export class Post{
  constructor(

public nid?: string,
public title?: string,
public body?: string
public image?: string
  ){
  }
}

有什么提示吗？

Answer 1

您正在将数组分配给应该是单个对象的对象。将数组的第一个元素复制到post变量中

this.post = res[0] as Post

旁注:将原始对象分配给类实例是不正确的。在这种情况下，您的 this.post.constructor 将不存在并且 this.post instanceof Post == false。

您可以执行 Object.assign(this.post, res[0]) 但如果不是所有属性都始终存在，您可能需要清除现有属性。

我更喜欢将对象形状定义为接口(interface)，这样你就不会遇到这个问题，因为所有接口(interface)信息在运行时都会被删除，而类确实会发出一些代码，而不仅仅是在编译时进行静态类型检查