Question

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

情境摘要： 我有一个基于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/讨论了一个似乎非常接近我所面临的情况的示例，但我不打算加载另一个组件，只是根据当前选择对数据执行另一个查询。

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);
        }
      })
}

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

1 个答案: