Question

我需要将卡的代码提取到单独的角度组件中，该代码是有效的，但是当我将其分割成另一个组件并将其引用到产品组件时，它不起作用，并给我此消息“无法读取属性”有效载荷”。

import { Component, OnInit, Input } from '@angular/core';
 

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.css']
})
export class ProductCardComponent implements OnInit {

  // tslint:disable-next-line:no-input-rename
  @Input('p') product: any = [];
  constructor() { }
 
  ngOnInit() {
  }

}

<div class="card" style="width: 15rem;">
  <img class="card-img-top" [src]="p.payload.val().imageUrl" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">{{ p.payload.val().title }}</h5>
    <p class="card-text">{{ p.payload.val().price | currency:'USD':true}}</p>
    <a href="#" class="btn btn-primary">Add to Cart</a>
  </div>
</div>

然后我将其引用到products组件，如果将html direcley放到products组件中，它将起作用。

  <div class="col">
      <div class="row"  >
          <ng-container  *ngFor="let p of  filteredProducts ; let i=index" class="container">
            <div class="col">
             <product-card [p]="p"></product-card>
            </div>
            <pre></pre>
            <div *ngIf="(i+1)% 2===0" class="w-100"> </div>
          </ng-container>
        </div>
  </div>

Answer 1

可能是，在收到@Input数据之前已渲染DOM模板。使用三元运算符或* ngIf更安全。

<div *ngIf="p" class="card" style="width: 15rem;">
  <img class="card-img-top" [src]="p.payload.val().imageUrl" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">{{ p.payload.val().title }}</h5>
    <p class="card-text">{{ p.payload.val().price | currency:'USD':true}}</p>
    <a href="#" class="btn btn-primary">Add to Cart</a>
  </div>
</div>

----或------

<div class="card" style="width: 15rem;">
      <img class="card-img-top" [src]="p?.payload.val().imageUrl" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">{{ p?.payload.val().title }}</h5>
        <p class="card-text">{{ p?.payload.val().price | currency:'USD':true}}</p>
        <a href="#" class="btn btn-primary">Add to Cart</a>
      </div>
    </div>

提取ProductCardComponent的问题表格-无法读取未定义的属性“有效载荷”

1 个答案: