我怎樣才能消毒CSS屬性從數據服務

Question

我需要生成與我的組件模板的設置div的背景圖像消毒CSS屬性指定的模板使用方法：使用數據獲得

<div *ngFor="let Item of Items" 
    [style.background-image]="Item.imageStyle 
    (click)="gotoDetail(Item.iditems)"> 
</div> 

通過數據服務。該組件是：

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)") 
      ) 

聲明沒有找到加載的數據。那我看到在瀏覽器控制檯的錯誤是：

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 

數據服務是：

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：

{ 
    "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)") 
      ) 
    } 

如何強制清理程序語句等待異步數據完全加載？或者，我怎樣才能直接在服務中生成清理過的屬性？

編輯 最好的答案來自PatrickJane如下：

 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)"))} 
     }); 

    } 

我也解決了這個問題，直接在服務方法（credits）工作，但它是更冗長：

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

訂閱函數是異步的，因此您的映射函數在訂閱函數運行之前調用。所以在這個階段，數組是沒有定義的，因爲你沒有設置任何初始值。

解決方法是在subscribe函數中執行此操作，並使用空數組初始化Items。

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)"))} 
    }); 

}