angular - 错误类型错误:无法读取未定义的属性“productId”
问题描述
我对此感到有些困惑,希望有人可以提供帮助。
我收到错误 ERROR TypeError: Cannot read property 'productId' of undefined。奇怪的是,我使用的 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;
}
解决方案
在你的 html 中试试这个
<p>detail works!</p>
<div *ngIf="product">
{{ product?.id }}
{{ product?.pTitle }}
{{ product?.pLDescr }}
{{ product | json }}
</div>
推荐阅读
- node.js - 如何在 aws S3 中获取 ObjectURL 作为响应
- tensorflow - 损失函数将 y_pred 转换为张量,这意味着模型的输出不能是 RaggedTensor 类型
- centos - cpack 限制操作系统版本包可以安装在
- html - 如果在 HTML 中选中复选框,我如何附加一个值?
- java - SICP方法求平方根
- java - google places api:placesClient.findAutocompletePredictions 返回任务不成功
- java - CORS 问题:从 DockerHub 拉取 Spring/MySQL 后端用于前端开发
- sql - 将字符串转换为数字
- c# - 为什么 C# 动态在内部类上找不到接口的方法?
- php - 如何发送逗号分隔的电子邮件