Ctx.post 未定义，当尝试使用 this.activateRoute.snapshot.params.id

问题描述

我正在处理一个在线论坛项目，我正在尝试实现一种查看帖子和评论的方法，但是当我转到特定帖子的页面时，我收到以下错误：

This is the main page where all the posts are listed

And this is the page for a specific post

这里是分配id值的地方：

constructor(private postService: PostService,private activateRoute: ActivatedRoute,private commentService: CommentService,private router: Router) {
    this.postId = this.activateRoute.snapshot.params.id;

    this.commentForm = new FormGroup({
      text: new FormControl('',Validators.required)
    });
    this.commentPayload = {
      text: '',postId: this.postId
    };
  }
ngOnInit(): void {
    this.getPostById();
    
  }
  
private getPostById() {
    this.postService.getPost(this.postId).subscribe(data => {
      this.post = data;
    },error => {
      throwError(error);
    });
  }

这是我的邮政服务：

export class PostService {

  constructor(private http: HttpClient) { }

  createPost(createPostPayload: CreatePostPayload): Observable<CreatePostPayload>{
    return this.http.post<CreatePostPayload>('http://localhost:9090/api/posts/create',createPostPayload);
  }

  getAllPosts(): Observable<Array<PostModel>> {
    return this.http.get<Array<PostModel>>('http://localhost:9090/api/posts/all');
  }

  getPost(id: number): Observable<PostModel> {
    return this.http.get<PostModel>('http://localhost:9090/api/posts/' + id);
  }

  getAllPostsByUser(name: string): Observable<PostModel[]> {
    return this.http.get<PostModel[]>('http://localhost:9090/api/posts/by-user/' + name);
  }
}

这是我的 html 组件：

<div class="container">
  <div class="row">
    <hr />
    <div class="col-md-9">
      <div class="row post">
        <div class="col-md-1">
          <app-Vote-button [post]="post"></app-Vote-button>
        </div>
        <div class="col-md-11">
          <span>
            <span class="category-text"><a class="post-url" href="">{{post.categoryName}}</a></span>
            <span> . Posted
              <span> {{post.duration}} </span>
              by              
              <a class="username" href="">{{post.userName}}</a>
            </span>
          </span>
          <hr />
          <a routerLink="post.url" class="post-title">{{post.postName}}</a>
          <div>
            <p class="post-text" [innerHtml]="post.description"></p>
          </div>
          <div class="post-comment">
            <form [formGroup]="commentForm" >
              <div class="form-group">
                <textarea class="form-control" [formControlName]="'text'" placeholder="Your Thoughts?"></textarea>
              </div>
              <button type="submit" class="login float-right">Comment</button>
            </form>
          </div>
          <div style="margin-top: 60px;" *ngFor="let comment of comments">
            <div class="comment">
              <div class="username">
                <a routerLink="/user/comment.username">{{comment.userName}}</a>
              </div>
              <div>
                <p>{{comment.duration}}</p>
              </div>
              <b>{{comment.text}}</b>
            </div>
            <hr />
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>

我无法找到 ID 未定义的原因。我正在使用@angular/cli 11.2.13。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）