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

任何建议，为什么这不工作，和/或如何做得更好，这是非常感谢。为什么我不能在我的ngAfterViewInit函数中访问我的局部变量？

情况概要： 我有一个SelectionComponent是基于NavComponent选择创建的。当用户进行选择并创建选择组件时，会有一个导出类实现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); 
    } 


}

该组件的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的Hero范例，以及一些相关的问题：How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?。这些例子中他们并不真正做这种类型的事情。如前所列，http://learnangular2.com/viewChild/讨论了一个似乎与我所面对的情况非常接近的例子，但我不打算加载另一个组件，只需根据当前选择对数据执行另一个查询即可。

来源

2016-12-27 Fullstack

首先检查，没有u得到'this.selection.id'与否？ –

您正在尝试使用您在另一个异步函数中的异步函数回调中获得的值。 – echonax

你需要调用getLocationsBySelection您ngOnInit里面你从getSelectionByName服务电话获得selection所有细节后，你可以删除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); 
     } 
     }) 
}

来源

2016-12-27 05:26:45 ranakrunal9

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

回答

相关问题