Question

我是新来的有角度的，我正在做一些练习。我可以通过我的站点中浏览器的控制台发现错误：“ ERROR 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));
    });
  }

}

控制台日志正在打印错误TypeError：“ _ co.post未定义”

1 个答案: