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

Question

我正在创建一个使用MongoDB数据库和NodeJS服务器的角度应用程序。

我的想法是，我创建一个应用程序，现在只有一个帖子列表，旁边是详细帖子。组件很好地站在彼此旁边工作，但我有一个问题。当我尝试检索单个帖子时，我可以通过console.dir（post）看到一切都很好并且对象已经传输到角度应用程序。问题是，当我尝试使用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;

我没有看到对象被包装在一个数组中，通过访问它我就能把它拿出来并使用它。