angular - ERROR TypeError: Cannot read property 'productId' of undefined

Question

I've gotten somewhat stuck on this and I'm hoping someone could help.

I'm getting the error ERROR TypeError: Cannot read property 'productId' of undefined. The peculiar thing is that the Observable I'm using will appear fully populated (including productId) when using {{ product | json }}. In fact {{ product.productId }} displays on the page as well. The only issue is the error appears in the console and I'm unsure how to handle it.

My code is below

HTML

<p>detail works!</p>

<div *ngIf="product===undefined && product===null;else detailInfo">
    this
</div>
<ng-template #detailInfo>
    
{{ product.id }}
{{ product.pTitle }}
{{ product.pLDescr }}
{{ product | json }}
</ng-template>

Component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService } from '../data.service';
import { iPrd } from '../Interfaces/iPrd';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {

  constructor(
    private route: ActivatedRoute, 
    private data: DataService 
  ) { }

  public product!: iPrd;

  getProdctDetail(): void {
    let id = Number(this.route.snapshot.paramMap.get('Id')); 
    this.data.getProductDetail(id.toString()).subscribe(data => { this.product = data; console.log(data) });
  } 

  ngOnInit(): void {
    this.getProdctDetail();
  }

}

Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { iPrd } from './Interfaces/iPrd';
import { Observable, of } from 'rxjs';
import { product } from './Interfaces/product';


@Injectable({
  providedIn: 'root'
})


export class DataService {

  
  public rootServer = 'https://localhost'
  public imgDir = '/imgDir'
  
  public getProducts(): Observable<prd[]>{
    return this.getDataArr('/api/myPrd/')
  }; 
  
  public getProductDetail(productId:string): Observable<iPrd>{
    return this.getData('/api/myPrd/' + productId)
  }

  public getDataArr(url:string): Observable<any[]>{
    return this.http.get<any>( this.rootServer + url)
  };

  public getData(url:string): Observable<any>{
    return this.http.get<any>( this.rootServer + url)
  }


  constructor(private http:HttpClient) { }
}

interface

export interface iPrd {
    id: number; 
    pTitle: string; 
    pSDescr: string;
    pLDescr: string; 
    pTypId: number; 
    pImgUrl: string; 
    pDetailUrl?: string; 
}

Answer 1

Try this in your html

<p>detail works!</p>

<div *ngIf="product">
        {{ product?.id }}
        {{ product?.pTitle }}
        {{ product?.pLDescr }}
        {{ product | json }}
</div>