错误类型错误：无法读取未定义的属性（读取“imageUrl”）角度材料

Question

当我写下这行html代码时：

<td> <img align="center" [src]="productByBarCode.imageUrl" /> </td>

控制台抛出以下错误：

错误类型错误：无法读取未定义的属性（正在读取 '图片网址')

imageUrl

是字符串类型，它是一个url。我正在使用角度材料。我该如何处理？

.html 文件：

<table>

        <!-- Image Column -->
  <ng-container matColumnDef="img">
    <th mat-header-cell *matHeaderCellDef></th>
    <td> <img align="center" [src]="productByBarCode.imageUrl" /> </td>
  </ng-container>

...

</table>

.ts 文件：

export class ProductDetailsComponent implements OnInit {
  public productByBarCode!: Product;
  displayedColumns = ['img', 'name', 'description', 'price', 'quantity', 'add to cart'];
  constructor(private _snackBar: MatSnackBar, private shared: SharedService, private productService: ProductService) { }

  ngOnInit(): void {
    this.shared.castByBarCode.subscribe(productByBarCode=>this.productByBarCode=productByBarCode);
...
}

Answer 1

我只能假设您的“共享”服务在视图尝试访问它之前无法解析

productByBarCode

变量。在这种情况下，您的代码将尝试从

imageUrl

解析

null

。

你可以像这样 *ngIf 检查

productByBarCode

是否为真/假：

<td>
    <img *ngIf="productByBarCode" align="center [src]="productByBarCode.imageUrl" />
</td>

在此之后，如果您的图像仍然无法解析，只需

console.log

您的

productByBarCode

变量来检查里面的内容:)

Answer 2

在 div 上方或同一标签中添加 *ngIf="itemObject" 将解决该问题。

div class="detail-section">
<div *ngIf="productObj"  class="container-fluid">
    <img src="{{productObj.imageUrl }}" class="detail-img">