Журнал консоли печатает ОШИБКА TypeError: "_co.post не определен"

Question

Я новичок в угловых и делаю некоторые практики.Я могу увидеть ошибку через консоль моего браузера на моем сайте: «ОШИБКА TypeError:« _co.post не определен »

Между тем содержимое моего сайта загружается правильно. Как я вижу, это должно быть связанос моей службой конструктора private _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>

Почему появляется эта ошибка, еслисодержимое загружается правильно? Заранее спасибо.

Answer 1

Я думаю, что ошибка связана с тем, как вы получаете 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));
    });
  }

}