Почему я не могу получить доступ к моей локальной переменной в моей функции ngAfterViewInit?

Question

Любые рекомендации относительно того, почему это не работает, и/или как это можно сделать лучше, очень ценится.

Ситуационная сводка: У меня есть элемент SelectionComponent, созданный на основе выбора NavComponent. Когда пользователь делает свой выбор и создается Selectioncomponent, существует класс экспорта, который реализует ngOnInit для извлечения данных из службы на основе индекса выбранного компонента (это отлично работает). Я также хотел заполнить html-шаблон SelectionComponent другими данными из другой службы, которая зависит от выбора пользователя. Однако вторая услуга зависит от локальной переменной в классе экспорта SelectionComponent, чтобы отфильтровать правильные метаданные из базы данных. Эта локальная переменная не определяется ни по объему, ни при попытке ссылаться на нее, и это ошибка, которая нарушает приложение, которое я думаю?

То, что я пробовал: - я попытался добавить вызов getLocation в ngOnInit также, но локальная
переменная не определена в это время. - Я попытался использовать ngAfterViewInit для вызова функции getLocation после ngOnInit, но локальная переменная все еще не определена. - Я не добавил @ViewChild, как указано в: http://learnangular2.com/viewChild/.

код вызывает мою проблему:

import {Component, Input, OnInit, AfterViewInit} from '@angular/core'; 
import {ActivatedRoute, Params} from '@angular/router'; 
import {Location} from '@angular/common'; 

import 'rxjs/add/operator/switchMap'; 

import {SelectionService}...; 
import {Selection}...; 
import {LocationService}...; 
import {Location}...; 

@Component({ 
    selector: 'selection', 
    templateUrl: 'selection.component.html', 
    styleUrls: ['selection.component.css'] 
}) 

export class SelectionComponent implements OnInit, AfterViewInit { 


    selection: Selection; 
    locations: Locations[] = []; 


    constructor(private selectionService: SelectionService, 
       private locationService: LocationService, 
       private route: ActivatedRoute) {} 


    ngOnInit(): void { 
     this.route.params 
      .switchMap((params: Params) => this.seletionService.getSelectionByName(params['name'])) 
      .subscribe(selection=> this.selection = selection); 
    } 

    getLocationsBySelection(id: number): void { 
     this.locationService.getLocationsBySelection(id).then(locations => this.locations = locations); 
    } 

    ngAfterViewInit(): void { 
     this.getLocationsBySelection(this.selection.id); 
    } 


} 

HTML компонента вкратце:

<div *ngIf="selection"> 
    <div class="container"> 
     <div class="row"> 
      <!-- boiler plate html --> 
     </div> 
     <div *ngIf="locations.length < 0" class="row"> 
      <div class="col s12"> 
       <h5 class="grey-text center-align">Locations</h5> 
      </div> 
      <div *ngFor="let location of locations" class="col s12 m4"> 
       <!-- more boilerplate content with a dash of angular interpolation --> 
      </div> 
     </div> 
    </div> 
</div> 

Сообщение об ошибке ИСКЛЮЧЕНИЕ: Uncaught (обещанию): Ошибка: Ошибка в: 0: 0 вызвана: Невозможно прочитать свойство «id» неопределенного

Ресурсы Я прочитал все примеры Angular's Tour of Hero на своем сайте и некоторые связанные с этим вопросы: How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?. В этих примерах они не делают такого рода вещи. Как указано выше, http://learnangular2.com/viewChild/, обсуждался пример, который, казалось, был очень близок к ситуации, с которой я столкнулся, но я не собираюсь загружать другой компонент, просто выполните другой запрос данных на основе текущего выбора.

Answer 1

Вы должны вызвать getLocationsBySelection внутри ngOnInit после вы получите все детали selection от getSelectionByName вызова службы, и вы можете удалить ngAfterViewInit:

ngOnInit(): void { 
    this.route.params.switchMap((params: Params) => this.seletionService.getSelectionByName(params['name'])) 
     .subscribe(selection=> { 
     this.selection = selection; 
     if (typeof this.selection.id !== 'undefined') { 
      this.getLocationsBySelection(this.selection.id); 
     } 
     }) 
}