How to fetch values for a particular ID in angular-CodePudding

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
}

CodePudding user response：

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>

CodePudding user response：

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; )
  }

}