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之类的错误我引用此网站进行查询但不工作Click here

Answer 1

首先将data更改为product然后您可以选择2方法：

<强> 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>

无法读取Object.eval的属性？

3 个答案: