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

【问题标题】：Why can I not access my local variable in my ngAfterViewInit function?为什么我不能在我的 ngAfterViewInit 函数中访问我的局部变量？
【发布时间】：2017-05-11 09:32:44
【问题描述】：

非常感谢任何关于为什么这不起作用和/或如何做得更好的建议。

情况总结： 我有一个基于 NavComponent 选择创建的 SelectionComponent。当用户进行选择并创建 Selectioncomponent 时，有一个导出类实现 ngOnInit 以根据所选组件的索引从服务中获取数据（这很好用）。我还想用来自另一个服务的其他数据填充 SelectionComponent 的 html 模板，这些数据取决于用户的选择。然而，第二个服务依赖于 SelectionComponent 的导出类中的一个局部变量，以便从数据库中过滤出正确的元数据。该局部变量不是由作用域定义的，也不是在 this 尝试引用它时定义的，这就是我认为破坏应用程序的错误？？

我尝试过的： - 我也尝试在 ngOnInit 中添加 getLocation 调用，但是本地
变量此时未定义。 - 我尝试在 ngOnInit 之后使用 ngAfterViewInit 调用 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);
    }


}

组件的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>

错误信息 例外：未捕获（承诺中）：错误：错误：0:0 导致：无法读取未定义的属性“id”

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

【问题讨论】：

先检查一下，你收到this.selection.id了吗？
您正在尝试使用在另一个异步函数中的异步函数回调中获得的值..

标签： angular typescript

【解决方案1】：

从getSelectionByName 服务调用中获取selection 的所有详细信息后，您需要在ngOnInit 中调用getLocationsBySelection，然后您可以删除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);
        }
      })
}

【讨论】：