无法读取Object.eval的属性？

Question

在我的项目中，我具有单击特定产品的功能，想要显示特定产品的详细信息，在这里我使用product: Object = []; 作为对象。在我的构造函数中

constructor( private _productService: UserService,
           private _router: Router,
           private _avRoute: ActivatedRoute,
           private _actRouter: ActivatedRoute) {
              if (this._avRoute.snapshot.params["id"]) {
                this.Productid = parseInt(this._avRoute.snapshot.params["id"]);
                console.log(this.Productid);
              }
              else {

              }
           }

在我的ngOninit()获取特定产品的ID

ngOnInit() {
if (this.Productid > 0) {
  this._productService.productDetail(this.Productid)
    .subscribe( data => { this.product = data },
    error => {
      debugger;
      this.errorMessage = error;
    }
  )
}

所以我的问题是，当我绑定html控件时，

<div id="mainImage">
       <img [src]="data.ProductImage" alt="" class="img-responsive">
</div>
<div class="box"> 
      <h1 class="text-center" >{{data.ProductName}}</h1>
      <p class="goToDescription"><a href="#details" class="scroll-to" >{{data.ProductShortDesc}}</a>
</div>

当我与此绑定时，会出现错误，例如Cannot read property 'ProductImage' of undefined at Object.eval我引用此网站进行查询但不起作用，请单击此处

Answer 1

首先将data更改为product ，然后可以采用以下两种方法：

1.使用ngIf检查产品数据是否可用

<div *ngIf="product">
    <div id="mainImage">
        <img [src]="product.ProductImage" alt="" class="img-responsive">
    </div>
    <div class="box"> 
        <h1 class="text-center" >{{product.ProductName}}</h1>
        <p class="goToDescription"><a href="#details" class="scroll-to" >{{product.ProductShortDesc}}</a>
    </div>
</div>

2.使用安全操作员？

<div id="mainImage">
    <img [src]="product?.ProductImage" alt="" class="img-responsive">
</div>
<div class="box"> 
    <h1 class="text-center" >{{product?.ProductName}}</h1>
    <p class="goToDescription"><a href="#details" class="scroll-to" >{{product?.ProductShortDesc}}</a>
</div>

Answer 2

产品详细信息组件的代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from './service/user.service.ts';

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

  selectedId: any = 0;
  product: any;
  constructor(
    private activatedRoute: ActivatedRoute,
    private _productService: UserService) {
    this.activatedRoute.pathFromRoot.forEach((path: ActivatedRoute) => {
      if (path.snapshot.params && path.snapshot.params['id']) {
        this.selectedId = Number(path.snapshot.params['id']);
        this._productService.productDetail(this.selectedId)
        .subscribe(data => {
          this.product = data[0];
        });
      };
    });
  }
}

在html中，

<pre> {{product | json}} </pre>

请尝试此操作，并检查产品对象中是否有任何数据。

Answer 3

我用ngFor循环解决了

<div *ngFor="let item of product">
   <div id="mainImage">
     <img [src]="item .ProductImage" alt="" class="img-responsive">
   </div>
   <div class="box"> 
     <h1 class="text-center" >{{item .ProductName}}</h1>
     <p class="goToDescription"><a href="#details" class="scroll-to" >
     {{item .ProductShortDesc}}</a>
  </div>
</div>