时间戳

首页 > 解决方案 > 控制台日志正在打印错误类型错误：“_co.post 未定义”

angular - 控制台日志正在打印错误类型错误：“_co.post 未定义”

问题描述

我是 Angular 的新手，我正在做一些练习。我可以在我的站点中通过我的浏览器控制台看到一个错误：“ERROR TypeError: “_co.post is undefined”

同时，我网站中的内容正在正确加载。正如我所看到的，这应该与我的构造函数服务私有_postService有关，但是，为什么要加载数据呢？

    import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { PostService } from '../services/post.service';
import { Post } from '../models/post';

@Component({
    selector: 'post',
    templateUrl: './getPost.component.html',
    styleUrls: ['./getPost.styles.css'],
    providers: [PostService]
})
export class getPostDetailComponent{
    public post: Post;

    constructor (
        private _route: ActivatedRoute,
        private _router: Router,
        private _postService: PostService
        ){

    }
    ngOnInit(){
        console.log('Post loaded...');

        this.getPost();
    }

    getPost(){
        this._route.params.forEach((params: Params) => {
            let post_ID = params['post_ID'];

            this._postService.getPost(post_ID).subscribe(
                response => {
                    if(response.code == 200){
                        this.post = response.message;
                    }else{
                        this._router.navigate(['/home/']);
                    }
                },
                error => {
                    console.log(<any>error);
                }
            );
        });
    }

}

这是html的示例

<ul>
  <li><a [routerLink]="['/home']">Home</a></li>
</ul>           
<hr/>
<div class="row">
  <div class="col-lg-4">
    <div class="card">
    <img class="card-img-top" src="http://localhost/uploads/{{post.post_image}}" class="cat-img">
      <div class="card-body">
        <h5 class="card-title">{{post.article_tittle}}</h5>
        <p class="card-text">{{post.post_content}}</p>
        <p>{{post.post_date}}</p>
        <div [innerHTML]="post.article_content"></div>
      </div>
  </div>
</div>
<div class="row justify-content-center pagination">
<div class="col-xs-2">
</div>
</div>

如果内容加载正确，为什么会出现此错误？提前致谢。

标签： angularangular6

解决方案

我认为该错误与您获得的方式有关params

this._route.params是一个BehaviorSubject，你应该subscribe得到它params。

您可能还想对您的GetPostDetailComponent

import { Component } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { PostService } from '../services/post.service';
import { Post } from '../models/post';

@Component({
  selector: 'post',
  templateUrl: './getPost.component.html',
  styleUrls: ['./getPost.styles.css'],
  providers: [PostService]
})
export class GetPostDetailComponent {
  public post: Post;

  constructor(
    private _route: ActivatedRoute,
    private _router: Router,
    private _postService: PostService
  ) { }

  ngOnInit() {
    console.log('Post loaded...');
    this.getPost();
  }

  getPost() {
    this._route.params.subscribe((params: Params) => {
      let post_ID = params['post_ID'];

      this._postService.getPost(post_ID)
        .subscribe(response => {
          if (response.code === 200) {
            this.post = response.message;
          } else {
            this._router.navigate(['/home']);
          }
        }, error => console.log(error));
    });
  }

}

推荐阅读