данные не попадают в угловых шаблон

Question

У меня есть компонент:

@Component({ 
    selector: 'fx-content', 
    templateUrl: 'app/modules/localization/html/localizationList.html', 
    providers: [ 
     LocalizationService, 
     HttpClient 
    ] 
}) 

export class LocalizationComponent implements OnInit { 
    private localizationService :LocalizationService; 

    public data :Array<string>; 

    constructor(localizationService :LocalizationService) { 
     this.localizationService = localizationService; 
    } 

    ngOnInit() { 
     this.getLocalization(); 
    } 

    getLocalization(){ 
     this.localizationService.getLocalization().localizationList.subscribe((data) => { 
      this.data = data; 
      console.log("DATA:",this.data) 
     }); 
    } 
} 

сервис:

export class LocalizationService { 
    private httpClient :HttpClient; 

    public localizationList; 

    constructor(httpClient :HttpClient) { 
     this.httpClient = httpClient; 
    } 

    public getLocalization(){ 
     this.localizationList = this.httpClient.get('localization').map(res => res.json()); 
     return this; 
    } 
} 

И templale:

<table class="lst"> 
    <thead> 
    <tr> 
     <th>Label</th> 
     <th>Path</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="#item of data.locales"> 
     <td> 
      <a>{{item.name}}</a> 
     </td> 
     <td> 
      {{item.path}} 
     </td> 
    </tr> 
    </tbody> 
</table> 

Когда я иду на эту страницу, я получаю ошибка: EXCEPTION: TypeError: Cannot read property 'locales' of undefined. В то же время консоль отображает обычный объект с данными. Я думаю, что эта ошибка связана с тем, что он пытается отобразить шаблон до того, как он получит данные из службы. Это так? Как заставить его работать правильно?

Answer 1

Вы должны использовать оператор Элвиса для этого:

<tr *ngFor="#item of data?.locales"> 
    <td> 
     <a>{{item.name}}</a> 
    </td> 
    <td> 
     {{item.path}} 
    </td> 
</tr> 

после обновления вашей службы:

export class LocalizationService { 
    private httpClient :HttpClient; 

    constructor(httpClient :HttpClient) { 
    this.httpClient = httpClient; 
    } 

    public getLocalization(){ 
    return this.httpClient.get('localization').map(res => res.json()); 
    } 
} 

и компонент:

getLocalization(){ 
    this.localizationService.getLocalization().subscribe(
    (data) => { 
     this.data = data; 
    } 
); 
} 

На самом деле вы можете напрямую вернуть наблюдаемые из службы и позволить компоненту подписаться на него ...