ERREUR TypeError: Impossible de lire la propriété 'ImagesUrl' de undefined

Question

Je suis simplement en train d'essayer http pour récupérer les paramètres du site d'une application, puis pour lier une propriété appelée "siteConfig.ImagesUrl", il semble avoir réussi à lier, mais provoque également la erreur suivant:

erreur TypeError: Impossible de lire la propriété 'ImagesUrl' de CONTEXTE non définie eRREUR DebugContext_ {vue: objet, NodeIndex: 26, nodeDef: objet, elDef: objet, elView: Object}

si "siteConfig.ImagesUrl" est supprimé les erreurs disparaissent. S'il vous plaît, quelqu'un peut-il indiquer où je me trompe?

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

Vous devez vérifier avant de rendre l'ImagesUrl est siteConfig existe ..

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

Answer 2

SiteConfig peut être NULL utiliser si ? dans la liaison pour gérer cela. Voir le safe navigation operator dans les documents pour plus.

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