无法读取 Object.eval 的属性？答案

【问题标题】：Cannot read property at Object.eval?无法读取 Object.eval 的属性？
【发布时间】：2018-02-06 11:32:33
【问题描述】：

在我的项目中，我有点击特定产品的功能，我想显示产品的特定细节，这里我将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 之类的错误我参考这个网站来查询但不工作Click here

【问题讨论】：

html控件中的data.productImage应该是product.productImage。
@NiralMunjariya 我像你说的那样使用过，但没有用。
@Günter Zöchbauer 请帮助我会一直尝试。
您是否控制台记录了您从服务中获取的数据？
@NiralMunjariya ya do console.log 我会得到 ,Array(1) 0 : {$id: "1", ProductId: 4, ProductName: "T-Shirt", ProductPrice: 45, ProductCartDesc ：“这是男士购物”，…} 长度：1

标签： angular

【解决方案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>

【讨论】：

我将数据更改为产品
我卡住了 4 个小时，请帮忙
@BrijeshMavani，很抱歉不在我的办公桌上，请您提供一个演示，以便我可以快速帮助您？

【解决方案2】：

我使用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>

【讨论】：

@Vivek Doshi 这是正确的方法吗？我得到了输出，和我想要的完全一样
你从服务器端得到一个数组，你可以做 product = data[0] 或者你必须使用 for 循环来访问 product 对象的属性。
@BrijeshMavani ，如果您只获得一个产品详细信息，请不要使用 ngFor ，而是使用 this.product = data[0]; 并按照我的方式进行操作

【解决方案3】：

产品细节组件代码：

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>

请试试这个并检查产品对象中是否有任何数据。

【讨论】：

使用 *ngFor 可以，但是使用您的代码，我正在处理