我目前有一个错误，我不知道为什么。错误只发生在我重新加载产品详细信息页，然后我得到下面的img错误。该页不显示产品详细信息。

details-product.components.ts执行服务的功能，以显示产品的详细信息和其他...

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

import { User } from 'src/app/models/user.model';
import { Product } from 'src/app/models/product.model';
import { ProductsService } from '../../shared/services/products.service';
import { AngularFirestoreCollection } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-details-product',
  templateUrl: './details-product.component.html',
  styleUrls: ['./details-product.component.css']
})
export class DetailsProductComponent implements OnInit {
  
  title: string = 'Weni Store - Détail de produit';
  userCollection!: AngularFirestoreCollection<User>

  product: Product | undefined;

  constructor(
    private route: ActivatedRoute,
    private productService: ProductsService,
    private titleService: Title
  ) { }

  ngOnInit(): void {
    this.titleService.setTitle(this.title);
    this.route.paramMap.subscribe(() => { this.getDetailProducts() })
  }

  getDetailProducts() {
    const productId = this.route.snapshot.paramMap.get('productID')!
    this.productService.getDetailProduct(productId).subscribe(
      (data : Product) => {
        this.product = data
    })
  }

}

details-product.component.html显示产品详细信息

<div class="uk-container panier" *ngIf="product">
        <div id="modal-center" class="uk-flex-top" uk-modal>
          <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
              <button class="uk-modal-close-default" type="button" uk-close></button>
              <img [src]="product.imageURL" class="nav-left">
          </div>
        </div>
        <div class="uk-child-width-1-2@s" uk-grid>
          <div>
            <a href="#modal-center" uk-toggle>
              <img [src]="product.imageURL" class="nav-left" alt="">
            </a>
          </div>
          <div>
            <div class="uk-dark uk-padding">
              <h3> {{ product.name }}</h3>
              <hr class="uk-divider-icon">
              <div class="uk-flex prix">
                <p class="uk-text">
                  <span>{{ product.price | currency: 'XOF' }} </span>
                </p>
              </div>
              <hr class="uk-divider-icon">
              <button class="uk-button uk-button-default uk-form-width-medium">
               <i class='bx bxs-cart-add'></i>
                Buy product
              </button>
            </div>
          </div>
        </div>
    </div>

products.service.ts管理产品模型的crud系统的服务

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { Product } from 'src/app/models/product.model';

import { take, map } from 'rxjs/operators';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {

    productCollection: AngularFirestoreCollection<Product>;
    
    constructor(private dbstore: AngularFirestore, private router: Router) {
      this.productCollection = this.dbstore.collection('products', (ref) => 
        ref.orderBy('category', 'desc')
      );
    }

    getProducts() {
      return this.dbstore.collection('products').snapshotChanges();
    }

    getByPriceProducts() {
      return this.dbstore.collection('products', (ref) => ref.orderBy('price', 'desc')).snapshotChanges();
    }
 
    getByCategoryProducts() {
      return this.dbstore.collection('products', (ref) => ref.orderBy('category', 'desc')).snapshotChanges();
    }

    getDetailProduct(productId: string): Observable<any> {
      return this.productCollection.doc(productId).valueChanges();
    }
}