は、どのように私はdiv要素の背景画像を設定するために、私のコンポーネントテンプレートで使用する消毒CSSプロパティを生成する必要が

Question

データサービスから与えられたテンプレートで使用するためのCSSプロパティをサニタイズすることができますデータサービスを介して。

import { Component } from '@angular/core'; 
    import { Router } from '@angular/router'; 
    import { DomSanitizer } from '@angular/platform-browser'; 
    import { OnInit } from '@angular/core'; 

    import { Item } from '../models/Item'; 

    import { CollectionDataService } from '../services/CollectionData.service'; 

    @Component({ 
    selector: 'mainpage', 
    templateUrl: 'app/mainpage/mainpage.component.html', 
    styleUrls: ['app/mainpage/mainpage.component.css'] 
    }) 
    export class MainpageComponent implements OnInit { 

    Items: Item[]; 

    ngOnInit() { 

     this.collectionDataService.getItems().subscribe(
       Items => this.Items = Items 
      ); 

     // Generates and sanitizes image links 
     this.Items.map(
       (LItem) => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)") 
      ) 
    } 

    constructor(
      private router: Router, 
      private sanitizer: DomSanitizer, 
      private collectionDataService: CollectionDataService 
     ) { 

    } 

    gotoDetail($iditems: number): void { 
     this.router.navigate(['/viewer', $iditems]); 
    } 
    } 

しかし、消毒プロパティ

this.Items.map(
       (LItem) => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)") 
      ) 

を生成文がロードされたデータを見つけることができませんので、それは動作しません：コンポーネントです。私は、ブラウザのコンソールで見ているエラーは、次のとおりです。

import { Injectable } from '@angular/core' 
    import { Http } from '@angular/http' 
    import { Item } from '../models/Item'; 
    import { DomSanitizer } from '@angular/platform-browser'; 

    @Injectable() 
    export class CollectionDataService { 

    constructor(
      private http: Http, 
      private sanitizer: DomSanitizer 
     ) { } 

    getItems() { 

     return this.http.get('app/mocksdata/items.json').map(
        response => <Item[]>response.json().items 
      ) 

    } 

    } 

し、提供items.json：

core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Error in ./MainpageComponent class MainpageComponent_Host - inline template:0:0 caused by: Cannot read property 'map' of undefined 
TypeError: Cannot read property 'map' of undefined 

データサービスがある私は、静的に設定した場合

{ 
    "items": [{ 
      "iditems": 1, 
      "imageStyle": "" 
     }, { 
      "iditems": 2, 
      "imageStyle": "" 
     }] 
    } 

データサービスを使用する代わりに、コンポーネント内のデータはすべて動作します。

export class MainpageComponent implements OnInit { 

    Items: Item[]; 

    ngOnInit() { 

     this.Items = [{ 
      "iditems": 1, 
      "imageStyle": "" 
     }, { 
      "iditems": 2, 
      "imageStyle": "" 
     }] 

     // Generates and sanitizes image links 
     this.Items.map(
       (LItem) => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)") 
      ) 
    } 

非同期データが完全に読み込まれるまでサニタイザーのステートメントを強制的に待機させることはできますか？あるいは、サービス内で直接サニタイズされたプロパティを生成する方法はありますか？私はまた、serviceメソッド（credits）で直接作業し、この問題を解決したが、それはより冗長である

 Items: Item[] = []; 

     ngOnInit() { 

     this.collectionDataService.getItems().subscribe(Items => { 
      this.Items = Items; 
      this.Items.map(LItem => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)"))} 
     }); 

    } 

：

return this.http.get('app/mocksdata/items.json') 
    .map((responseData) => { 
      return responseData.json().items; 
     }) 
    .map(
     (iitems: Array<any>) => { 
      let result:Array<Item> = []; 
      if (iitems) { 
       iitems.forEach((iitem) => { 
        iitem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+iitem.iditems+".jpg)"); 
        result.push(<Item>iitem); 
       }); 
      } 
      return result; 
     } 
    ) 

Answer 1

EDIT 最良の答えは下のパトリック・ジェーンから来ています

subscribe関数は非同期なので、マップ関数はsubscribe関数が実行される前に呼び出されます。この段階では、初期値を設定していないため、配列は未定義です。

解決策は、subscribe関数内でこれを行い、空の配列の項目を初期化することです。

Items: Item[] = []; 

ngOnInit() { 

    this.collectionDataService.getItems().subscribe(Items => { 
     this.Items = Items; 
     this.Items.map(LItem => LItem.imageStyle = this.sanitizer.bypassSecurityTrustStyle("url(template/images/"+LItem.iditems+".jpg)"))} 
    }); 

}