Angular displays the error Property 'message' does not exist on type 'Observable<any>.

It implements the process of retrieving and displaying data from Express using Angular's HttpclientModule.
The following error appears when displaying the received value in GET:
How do I resolve this error?

Property 'id' does not exist on type' number | Comment | (() = > string) | (() = > string) | (() = > Comment | undefined) | (...items: Comment [ ]) = > number) | {(...items:ConcatArray < Comment; Comment ( ] | Comment...
  Property 'id' does not exist on type 'number'.

9<h4class="media-heading">{{comment.value.id|json}}</h4>

·Applicable code
Type Definition

export interface Comment {
  
  comments: [
    {
      id: number,
      message:string,
      }
    ]
}

comment.service.ts

import {Injectable} from '@angular/core';
import {HttpClient, HttpRequest, HttpErrorResponse} from '@angular/common/http';
import {catchError} from "rxjs/operators";
import {Observable} from 'rxjs';
import {Comment} from '../models/comment';
import { of } from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class CommentService {
  private base_url:string='http://localhost:3000'
  comments!—Comments

  constructor(private http:HttpClient){}

  getComments():Observable<Comment>{
    return this.http.get<Comment>(`${this.base_url}/comments`)/get Communications
    .pipe(
      catchError(this.handleError<Comment>('getComments')))
    );
  }

  private handleError<T>(operation='operation', result?:T){
    return(error:any):Observable<T>=>{
      // TODO:sending errors to logging infrastructure on remote
      console.error(error); // Output to console instead
      // Return empty results to make the app sustainable
      return of (result as T);
    };
  }
  

}

·app.commponet.ts
I expect that the type of value returned in ngOnInit() is strange

import {Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {ApiService,Item} from './service/api.service';
import {Comment} from './models/comment';
import {CommentService} from './service/comment.service'
// import {Comment} from './class/comment'
import {NgForm} from '@angular/forms';

@Component({
  selector: 'ac-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title='web-app';
  
  comes!:Comment [ ]
  // public comments$!—Observable <Comment>
  form! —NgForm


  constructor(private api:ApiService, private comment:CommentService){}

  ngOnInit():any{
    This.comment.getComments().subscribe(res:any)=>{
       This.comes=res.comments
       console.log (this.comes)
    })
    
  }
}

·app.component.html

<div*ngFor="let comment of comes | keyvalue">
        
          <div class="media">
            <div class="media-body">
              <div class="d-flex w-100 justify-content-between">
                <h4class="media-heading">{{ comment.value.message|json}}</h4>
                <small class="media-date">{{comment|json}}</small>
              </div>
            </div>
 </div>

comment|json content

{"id":1, "message": "Good morning", "createdAt": "2022-02-17T23:47:57.011Z", "updatedAt": "2022-02-22T03:45:49.555Z"}

·Additional
Full Error

Property 'message' does not exist on type 'KeyValue<string, number | Comment | (() => string) | (() => string) | (() => Comment | undefined) | ((...items: Comment[]) => number) | { (...items: ConcatArray<Comment>[]): Comment[]; (...items: (Comment | ConcatArray<...>)[]): Comment[]; } | ... 27 more ... | (() => { ...; })>'.

comment|json contains {"key":"0", "value":{"id":1, "message":"Good morning", "createdAt":"2022-03-06T10:01:29.781Z", "updatedAt":"2022-03-06T10:01:29.790Z"}
So when I try to display {{comment.value.message}}, the following error

Property 'message' does not exist on type 'number | Comment | (() = > string) | (() = > string) | (() = > string) | (() & > Comment | undefined)

·Corrected parts

export class CommentService{
  private base_url:string='http://localhost:3000'
  comments!:ResponseComment

  constructor(private http:HttpClient){}

  getComments():Observable<ResponseComment>{
    return this.http.get<ResponseComment>(`${this.base_url}/comments`)
    .pipe(
      catchError(this.handleError<ResponseComment>('getComments')))
    );
  }

·Type definition

export interface Comment {  
  id:number
  message:string
  createdAt:number
  user_id —number
}

export interface ResponseComment {  
  comments —Array <Comment>
}

angularjs

2022-09-30 11:02

1 Answers

comes in app.commponet.ts has declared itself of the type Comment[], so we expect the following array of comments.

comes=[
{
  comments: [
    {
      id: number,
      message:string,
      }
    ]
},
{
  comments: [
    {
      id: number,
      message:string,
    }
  ]
}
]

Actually, it seems that you are expecting an array of {id:number,message:string}, so it would be better to separate the interfaces by API response and model

export interface Comment {  
  id:number
  value: {
    message:string
  }
}

export interface ResponseComment {  
  comments —Array <Comment>
}

After the interface changes, change the type of CommentService (there may be other minor fixes).

//comment.service.ts
export class CommentService {
// omission
  getComments():Observable<ResponseComment>{
    return this.http.get<ResponseComment>(`${this.base_url}/comments`)
    .pipe(
      catchError(this.handleError<ResponseComment>('getComments')))
    );
  }
// omission
}

<div*ngFor="let comment of comes | keyvalue">
        
          <div class="media">
            <div class="media-body">
              <div class="d-flex w-100 justify-content-between">
                <h4class="media-heading">{{comment.value.message}}</h4>
                <small class="media-date">{{comment|json}}</small>
              </div>
            </div>
 </div>

2022-09-30 11:02

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656