为什么我不能在ngAfterViewInit函数中访问我的局部变量?

时间:2016-12-27 05:15:43

标签: angular typescript

非常感谢任何有关为什么不起作用的建议,和/或如何更好地完成这项工作。

情境摘要: 我有一个基于NavComponent选择创建的SelectionComponent。当用户进行选择并创建Selectioncomponent时,有一个导出类实现ngOnInit,以根据所选组件的索引从服务中获取数据(这很好)。我还想用其他服务中的其他数据填充SelectionComponent的html模板,这些数据取决于用户的选择。但是,第二个服务依赖于SelectionComponent的导出类中的局部变量,以便从数据库中过滤正确的元数据。该局部变量既不是由作用域定义的,也不是当它试图引用它时,那就是我认为破坏应用程序的错误?

我尝试了什么:   - 我也尝试在ngOnInit中添加getLocation调用,但是本地
   变量目前尚未定义。        - 我尝试使用ngAfterViewInit在ngOnInit之后调用getLocation函数,但局部变量仍未定义。     - 我没有像http://learnangular2.com/viewChild/中那样添加@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);
    }


}

该组件的简要说明

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

错误消息 EXCEPTION:未捕获(承诺):错误:错误:0:0导致:无法读取属性&#39; id&#39;未定义的

资源 我已经阅读了他们网站上所有Angular的英雄之旅示例,以及一些相关问题:How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?。在这些例子中,他们并没有真正做到这种事情。如前所述,http://learnangular2.com/viewChild/讨论了一个似乎非常接近我所面临的情况的示例,但我不打算加载另一个组件,只是根据当前选择对数据执行另一个查询。

1 个答案:

答案 0 :(得分:5)

您需要在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);
        }
      })
}