为什么我不能调用这个对象的属性？ （角，MongoDB）

Question

我正在制作一个使用 MongoDB 数据库和 NodeJS 服务器的 Angular 应用程序。

我的想法是我创建一个应用程序，它现在只有一个帖子列表，旁边是详细帖子。这些组件很好地彼此相邻并且工作，但我有一个问题。当我尝试检索单个帖子时，我可以通过 console.dir(post) 看到一切都很好，并且该对象已传输到 Angular 应用程序。问题是当我尝试使用 post.content 时，我收到一条未定义的消息。

我已经搜索了几个小时，但似乎找不到原因。我将不胜感激您能给我的任何帮助。以下是所有信息，如果您需要查看其他信息，请告诉我。

提前致谢。

这是我要显示数据的 post-detail.component.html。

<div class="row">
<div class="col-xs-12">
<p>Content:</p>
<h1>{{ post.content }}</h1>
</div>
</div>

detail.ts 文件（我省略了导入）

    @Component({
  selector: 'app-post-detail',
  templateUrl: './post-detail.component.html',
  styleUrls: ['./post-detail.component.css']
})
export class PostDetailComponent implements OnInit {
  post: Post = new Post();
  id: string;

constructor(private postService: PostService,
            private route: ActivatedRoute,
            private router: Router) {
}

ngOnInit() {
  this.route.params
    .subscribe(
      (params: Params) => {
        this.id = params['id'];
        this.postService.getPost(this.id).then(res => {
          console.dir(res);
          console.dir(res.content);
          this.post = res;
        });
      }
    );
  }
}

我用来检索实际数据的 post.service.ts：

@Injectable()
export class PostService {
  postChanged = new Subject<Post[]>();

  private headers = new Headers({'Content-Type': 'application/json'});
  private serverUrl = environment.serverUrl + '/blogPosts/'; // URL to web api
  private posts: Post[];

  constructor(private http: Http) {
  }

  //this one DOES work
  getPosts() {
    console.log('Fetching BlogPosts from database.')
    return this.http.get(this.serverUrl, {headers: this.headers})
      .toPromise()
      .then(response => {
        this.posts = response.json() as Post[];
        return response.json() as Post[];
      })
      .catch(error => {
        return error;
      });
  }

  getPost(index: string) {
    console.log('Fetching individual BlogPost from database.');
    console.log('index' + index);
    if (index == null) {
      console.log('null');
      return null;
    }
    return this.http.get(this.serverUrl + index, {headers: this.headers})
      .toPromise()
      .then(response => {
        console.dir(response.json().content);
        console.dir(response.json());
        return response.json() as Post;
      })
      .catch(error => {

        return this.handleError(error);
      });
  }
}

后模型：

export class Post {

  private id: string;
  private _content: string;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
  public get _id(): string {
    return this.id;
  }

  public set _id(n: string) {
    this.id = n;
  }

  public get content(): string {
    return this._content;
  }

  public set content(n: string) {
    this._content = n;
  }
}

我在 Postman GET /blogPost/id 和控制台日志中添加了图像。 谢谢！

Console log

Postman GET route

Answer 1

我可能错了，但您能否将服务中的任何地方的 _content 更改为 content ？

编辑：当您调用服务方法时，您确定this.id 是正确的吗？因为如果是null or undefined，那么return null会被执行。

另一个注意事项是，在 Postman 中，我看到在此示例中响应是一组对象（一个对象）。您可以在组件中尝试this.post = res[0]; 吗？

Answer 2

return response.json() as Post;

在 post.service.ts 中应该是：

return response.json()[0] as Post;

我没有看到该对象被包装在一个数组中，通过访问它我能够将它取出并使用它。