I'm new to angular and am trying to do a simple blog app, I'm unable to retrieve the information of the blog for a particular id of the blog. I tried by setting my "Blog" variable to the "blogs[]" interface type but I'm getting an error in my HTML file as "Property 'body' does not exist on type 'blogs[]' " this is the same error that is repeated for the blog's title and author too.
Here are my blog-details files
blog-details.components.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BlogService } from 'src/app/services/blog.service';
import { blogs } from '../../../../blog';
@Component({
selector: 'app-blog-details',
templateUrl: './blog-details.component.html',
styleUrls: ['./blog-details.component.css']
})
export class BlogDetailsComponent implements OnInit {
Blog: blogs[]
constructor(
private blogService: BlogService,
private route: ActivatedRoute
) { }
ngOnInit(): void {
const id = this.route.snapshot.params['id']
console.log(id)
this.blogService.getOneBlog(id).subscribe(Blog => this.Blog = Blog)
}
}
blog-details.components.html
<div class="blog-details">
<article>
<h2>{{Blog.title}}</h2>
<p>{{Blog.author}}</p>
<div class="body">
{{Blog.body}}
</div>
<button class="delete-blog">
Delete Blog
</button>
</article>
</div>
Here is my interface, blog.ts
export interface blogs {
id: number,
title: string,
body: string,
author: string
}
Let your template HTML handle the subscription
export class BlogDetailsComponent implements OnInit {
myBlogs!: Observable<blogs[]>;
constructor(
private blogService: BlogService,
private route: ActivatedRoute
) { }
ngOnInit(): void {
const id = this.route.snapshot.params['id']
this.myBlogs = this.blogService.getOneBlog(id);
}
}
Use the async pipe in order to get your data
<ng-container *ngIf="(myBlogs | async) as blogs">
<div class="blog-details" *ngFor="let blog of blogs">
<article>
<h2>{{blog.title}}</h2>
<p>{{blog.author}}</p>
<div class="body">
{{blog.body}}
</div>
<button class="delete-blog">
Delete Blog
</button>
</article>
</div>
</ng-container>
Change your Blog variable from an array to a single item
based on your code your Blog: blogs[] variable should be a single blog not an array.
Try changing it to Blog: blogs.
It is also good practice to define interfaces with a 'I' at the beginning like so IBlog so that is is easily identified as a interface and you should use singular naming for your interface, 'blog', not the plural 'blogs'
So you should be looking to change it to this Blog: IBlog
export interface IBlog {
id: number,
title: string,
body: string,
author: string
}
<div class="blog-details">
<article>
<h2>{{Blog.title}}</h2>
<p>{{Blog.author}}</p>
<div class="body">
{{Blog.body}}
</div>
<button class="delete-blog">
Delete Blog
</button>
</article>
</div>
export class BlogDetailsComponent implements OnInit {
Blog: IBlog;
constructor(
private blogService: BlogService,
private route: ActivatedRoute
) { }
ngOnInit(): void {
const id = this.route.snapshot.params['id']
console.log(id)
this.blogService.getOneBlog(id)
.subscribe(blog => this.Blog = blog; )
}
}