【问题标题】：Get single post detail in angular and ionic获取角度和离子的单个帖子细节
【发布时间】：2019-05-23 07:18:01
【问题描述】：

我正在尝试获取单个帖子的详细信息，但似乎它返回的是所有帖子的数组，而不是点击一个帖子，

代码

Post service

export class PostsService {

  apiUrl = 'https://example.com/api/posts/';

  constructor(private http: HttpClient) { }


  getPosts(): Observable<any> {
    return this.http.get(`${this.apiUrl}`).pipe(
      map(posts => posts)
    );
  }

  //getting single post
  getDetails(url) {
    return this.http.get(`${this.apiUrl}?i=${url}&plot=full`);
  }

}

post detail controller

export class PostsDetailsPage implements OnInit {

  post: any;

  constructor(private activatedRoute: ActivatedRoute, private postsService: PostsService) { }

  ngOnInit() {
    let url = this.activatedRoute.snapshot.paramMap.get('url');
    this.postsService.getDetails(url).subscribe(res => {
      this.post = res;
      console.log(res); //see next part
    });
  }
}

console.log(res); returns

(73) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

res 在我的帖子控制器中应该返回单个帖子详细信息，但它的行为与我的博客页面相同（返回所有帖子）。

routes

{ path: 'posts', loadChildren: './pages/posts/posts.module#PostsPageModule' },

{ path: 'posts/:url', loadChildren: './pages/posts-details/posts-details.module#PostsDetailsPageModule' },

有什么想法吗？

更新

正如你看到我的后端工作正常，问题出在我的前端功能（上面共享）

【问题讨论】：

你已经发布了你的前端代码，但是你的后端呢？这些问题是否可能与后端有关？你确定你调用的是正确的网址吗？如果对后端一无所知，将很难为您提供帮助。
也许我没看到，但是您将 id 添加到每个 url 以将 GET-Method 请求引导到正确的 URL 的行在哪里？
@liqSTAR 我正在使用url (slug) 而不是id

标签： javascript angular ionic-framework

【解决方案1】：

已解决

问题是由我的获取网址引起的，我将其更改为下面的代码，现在工作正常，

getDetails(url) {
    return this.http.get(`${this.apiUrl}${url}`).pipe(
      map(post => post)
    );
}

我从 get 部分中删除了 ?i= 和 &plot=full。

【讨论】：

【解决方案2】：

对我来说，您的 url 参数似乎是未定义的。您是否检查过 devtools 中的网络选项卡？在那里，您可以准确地看到向服务器发出的呼叫。否则我会建议对它的获取点进行一些重构：

export class PostsDetailsPage implements OnInit {

  post: any;

  constructor(private activatedRoute: ActivatedRoute, private postsService: PostsService) { }

  ngOnInit() {
    this.activatedRoute.params.subscribe((x: {url: string}) => 
      this.postsService.getDetails(x.url).subscribe(res => {
        this.post = res;
        console.log(res); //see next part
      }));
  }
}

访问 ActivatedRoute 时，您应该不需要快照。另外，我宁愿使用 params.subscribe 而不是 paramMap，因为

您将自动获得路线更新
paramMap 不是那么可靠（路由上的异步操作。）

【讨论】：