-1

I need your help. I take data from the JSON placeholder resource, display posts and try to make each post have a posts-details page and open this page instead of all posts. As a dynamic page for each post. However, I'm getting errors in the posts-details.component.ts file that look like this:

TS2322: Type 'IPost[]' is not assignable to type 'IPost'., TS2739: Type 'IPost[]' is missing the following properties from type 'IPost': id, title, body

Please help with this problem. I will be very grateful

posts-details.component

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {IPost} from "../models/posts";
import {PostService} from "../services/post.service";

@Component({
selector: 'app-post-details',
templateUrl: './post-details.component.html',
styleUrls: ['./post-details.component.css']
})

export class PostDetailsComponent implements OnInit {

fullPost: IPost

constructor(private activatedRoute: ActivatedRoute, private postService: PostService) {
this.activatedRoute.params.subscribe(params => {
  this.postService.getDifferentPost(params['id']).subscribe(value => this.fullPost = value)
})
}

ngOnInit(): void {}
}

post.service.ts

import {HttpClient} from "@angular/common/http";
import { Injectable } from '@angular/core';
import {Observable} from "rxjs";
import {IPost} from "../models/posts";

@Injectable({
providedIn: 'root'
})

export class PostService {

private url = `https://jsonplaceholder.typicode.com/posts`

constructor(private httpClient: HttpClient) { }

getPosts(): Observable<IPost[]> {
return this.httpClient.get<IPost[]>(this.url)
}

getDifferentPost(id: number): Observable<IPost[]> {
return this.httpClient.get<IPost[]>(this.url + '/' + id);
}

}

my routes in app,module.ts file

let routes: Routes = [
{path: 'users', component: UsersComponent, children: [{path: ':id', component: UserDetailsComponent}]},
{path: 'posts', component: PostsComponent},
{path: 'posts/:id', component: PostDetailsComponent},
]

post.ts

export interface IPost {
id: number,
title: string,
body: string
}

posts-details.component.html

<div *ngIf="fullPost">
{{fullPost.title}}
{{fullPost.body}}
</div>
Dmitry Chernyak
  • 295
  • 3
  • 12

1 Answers1

2

You are expecting IPost array from the service, but you are adjusting the service response into singular IPost element. You should handle as this:

fullPost: IPost[]

constructor(private activatedRoute: ActivatedRoute, private postService: PostService) {
  this.activatedRoute.params.subscribe(params => {
     this.postService.getDifferentPost(params['id']).subscribe(value => this.fullPost = value)
  })
}

and also in your html file :

<div *ngFor="let post of fullPost">
{{post.title}}
{{post.body}}
</div>
Fatih Ersoy
  • 680
  • 1
  • 5
  • 24
  • @Faith Ersoy, If I do this, I will get an error in the post-details.component.html file: `Unresolved variable title, body` – Dmitry Chernyak Dec 27 '21 at 12:44
  • Hello, I just updated my answer due to the changes of your .html file. You should not use ngIf for arrays, use ngFor instead. – Fatih Ersoy Dec 27 '21 at 12:47
  • Happy to hear this! – Fatih Ersoy Dec 27 '21 at 12:50
  • I am sorry to disturb you again(( After it, in the console i have an following error: `Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays`. My application works, but in component `post_details.compoent.html`, i got it. Sorry(( – Dmitry Chernyak Dec 27 '21 at 12:58
  • It means that your backend response is not in full array form. You should first look for the data you're getting from your backend (you can simply console.log the response). Someone overcome this issue by using JSON.parse(fullPost) or you can try
    {{post | json}}
    . If that was not helpful you should see this post : https://stackoverflow.com/q/35660306/14693246     – Fatih Ersoy Dec 27 '21 at 13:13
  • Have you solved the issue? – Fatih Ersoy Dec 27 '21 at 13:30
  • Sorry, I was unable to resolve this issue. Anyway, this is my github with this project: https://github.com/Dmytrii9Cherniak/AngRoutes – Dmitry Chernyak Dec 27 '21 at 15:01
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240479/discussion-between-frankenstar-and-fatih-ersoy). – Dmitry Chernyak Dec 27 '21 at 17:10