我尝试从 DB 中获取一个对象（类型为“Coupon”），并在单击 HTML 列表中的对象时显示它。

问题是， 当页面加载时，对象详细信息按我想要的方式显示，但是！控制台还显示“ERROR TypeError：无法读取未定义的属性‘imageURL’”。

我的代码：

步骤 - 1： storage.service.ts（HTTP 请求）：

@Injectable()
export class StorageService {
token: string

constructor(private http: HttpClient) { }

fetchCouponById(couponId: string): Observable<Coupon> {
const params = new HttpParams()
  .set('token', this.token)
  .set('couponId', couponId)
return this.http.get<Coupon>('http://localhost:8080/api/company/get_coupon', { params })
}

步骤 - 2： company.service.ts：

@Injectable()
export class CompanyService {

@Output() selectedCoupon = new EventEmitter<Coupon>()
coupon: Coupon

fetchCouponById(id: string) {
this.storagService.fetchCouponById(id)
  .subscribe(coupon => {
    this.coupon = coupon
    this.onSelectCoupon()
  })
}

onSelectCoupon() {
this.selectedCoupon.emit(this.getCoupon())
}

getCoupon() {
return this.coupon
}

步骤 - 3： company-coupons-page.ts：

export class CompanyCouponsPageComponent implements OnInit {

coupon: Coupon
selectedCoupon: string

constructor(
    private companyService: CompanyService,
private route: ActivatedRoute) { }

ngOnInit(): void {
this.route.params.subscribe((params: Params) => { this.selectedCoupon = params['id'] })
this.companyService.fetchCouponById(this.selectedCoupon)
this.companyService.selectedCoupon.subscribe(
  (coupon: Coupon) => { this.coupon = coupon})
}

company-coupons-page.HTML：

<div class="container">
      <div class="row">
                <div class="col-6"
                     style="height: 70%; 
                          width: 40%;">
                          <img src={{coupon.imageURL}}
                               alt="..."
                               style="width: 100%;height: 100%; ">
                </div>
                <div class="col-6">
                          <h1>{{coupon.title}}</h1>
                          <h3>{{coupon.amount}}</h3>
                          <h3>{{coupon.category}}</h3>
                </div>
    </div>