ERROR TypeError: Cannot read property 'ImagesUrl' of undefined

Question

我只是想通过 http 获取一个应用程序的站点设置，然后绑定一个名为 "siteConfig.ImagesUrl" 的属性，它似乎已成功绑定，但是也会导致以下错误：

错误类型错误：无法读取未定义的属性 'ImagesUrl' 错误上下文 DebugContext_ {view: Object, nodeIndex: 26, nodeDef: Object, elDef: Object, elView: Object}

如果删除 "siteConfig.ImagesUrl"，错误就会消失。请有人指出我哪里错了。

cart.component.html

<div *ngFor="let product of productCollection; let i=index" class="row">
                        <div class="col-sm-2 product-image">
                            <div class="img-wrapper">
                                <img [src]="siteConfig.ImagesUrl.toString() + product.ProductImageUrl" [alt]="product.ProductShortDescription" /> //<== Error occurs here
                            </div>
                        </div>
</div>

cart.component.ts:

import { Component, Input, OnInit } from "@angular/core";
import { Product } from '../products/product.entity';
import { ICartService, ICartControllerSettings, ICartComponent } from './cart.interfaces';
import { SiteSettingsService } from '../../services/site/settings.service';

@Component({
    selector: 'e-cart',
    templateUrl: './templates/cart.component.html'
})

export class CartComponent implements ICartComponent { 
    tmpCollection: Product[];
    productCollection: Product[];
    CartControllerSettings: ICartControllerSettings = null;
    siteConfig: JSON;

    constructor(private _siteSettingsService: SiteSettingsService) { }

    ngOnInit() {
        this._siteSettingsService.FetchSiteSettings().subscribe((response) => this.siteConfig = response);
    }
}

settings.service.ts:

import { Component, OnInit, Injectable } from '@angular/core';
import { Http, HttpModule, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SiteSettingsService {
    siteConfigUrl: string = "http://localhost:3000/siteconfig";
    uiConfigUrl: string = "http://localhost:3000/uiconfig";

    constructor(private _http: Http) { }
    public imagePath: string;

    FetchSiteSettings() {
        return this._http.get(this.siteConfigUrl).map((response: Response) => response.json());
    }

    GetUISettings() {
        return this._http.get(this.uiConfigUrl).map((response: Response) => response.json());
    }
}

Answer 1

您需要在渲染之前检查 ImagesUrl 是否存在 siteConfig..

<div class="img-wrapper" *ngIf="siteConfig">
      <img [src]="siteConfig.ImagesUrl.toString() + product.ProductImageUrl" [alt]="product.ProductShortDescription" /> //<== Error occurs here
 </div>

Answer 2

siteConfig 可以为空，因此在绑定中使用 ? 来处理它。有关更多信息，请参阅文档中的 safe navigation operator。

<img [src]="siteConfig?.ImagesUrl.toString() + product.ProductImageUrl" [alt]="product.ProductShortDescription" />

ERROR TypeError: Cannot read property 'ImagesUrl' of undefined

ERROR TypeError: Cannot read property 'ImagesUrl' of undefined

binding

angular-ng-if

angular2-observables

angular