ERROR TypeError: Cannot read properties of undefined (reading 'imageUrl') Angular material

Question

当我写这行html代码时：

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

控制台抛出以下错误：

ERROR TypeError: Cannot read properties of undefined (reading 'imageUrl')

imageUrl是字符串类型，是一个url。我正在使用 Angular material。我该如何处理？

.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 变量。在这种情况下，您的代码试图从 null.

解析 imageUrl

你可以像这样 *ngIf 检查 productByBarCode 是否是 truthy/falsy:

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

在此之后，如果您的图像仍然无法解析，只需 console.log 您的 productByBarCode 变量来检查里面的内容:)

ERROR TypeError: Cannot read properties of undefined (reading 'imageUrl') Angular material

ERROR TypeError: Cannot read properties of undefined (reading 'imageUrl') Angular material

html

typescript

angular-material

angular