ERROR TypeError: Cannot read property 'productId' of undefined

Question

我对此有些困惑，希望有人能提供帮助。

我收到错误错误类型错误：无法读取未定义的 属性 'productId'。奇怪的是，我正在使用的 Observable 在使用 {{ product | json}}。事实上 {{ product.productId }} 也会显示在页面上。唯一的问题是错误出现在控制台中，我不确定如何处理它。

我的代码如下

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>

组件

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

}

服务

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

界面

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

Answer 1

在您的 html

中试试这个

<p>detail works!</p>

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