angular - Hvorfor kan jeg ikke få tilgang til min lokale variabel i min ngAfterViewInit-funksjon?

Eventuelle anbefalinger om hvorfor dette ikke fungerer, og/eller hvordan dette kunne gjøres bedre, er svært verdsatt.

Situasjonsoppsummering: Jeg har en SelectionComponent som blir opprettet basert på et valg i NavComponent. Når en bruker gjør sitt valg, og SelectionComponent blir opprettet, finnes det en eksportert klasse som implementerer ngOnInit for å hente data fra en tjeneste basert på indeksen til den valgte komponenten (dette fungerer fint). Jeg ønsket også å fylle opp SelectionComponent's HTML-mal med annen data fra en annen tjeneste som avhenger av brukerens valg. Imidlertid avhenger den andre tjenesten av en lokal variabel i SelectionComponent's eksporterte klasse for å filtrere riktig metadata fra databasen. Den lokale variabelen er verken definert av omfanget eller når denne prøver å referere til den, og det er feilen som jeg tror bryter appen??

Hva jeg har prøvd: - Jeg prøvde å legge til getLocation-kallet i ngOnInit også, men den lokale variabelen er udefinert på dette tidspunktet. - Jeg prøvde å bruke ngAfterViewInit for å kalle getLocation-funksjonen etter ngOnInit, men den lokale variabelen var fortsatt udefinert. - Jeg la ikke til @ViewChild som nevnt i: http://learnangular2.com/viewChild/.

Koden som forårsaker problemet mitt:

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


}

Komponentens HTML i korthet:

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

Feilmeldingen UNNTAK: Ufanget (i løfte): Feil: Feil i :0:0 forårsaket av: Kan ikke lese egenskapen 'id' av udefinert

Ressurser Jeg har lest gjennom alle Angulars Tour of Heroes-eksempler på deres nettside, og noen relaterte spørsmål som dette: Hvordan fikse Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?. De gjør egentlig ikke denne typen ting i de eksemplene. Som listet tidligere, http://learnangular2.com/viewChild/, diskuterte et eksempel som virket å være veldig nær situasjonen jeg står overfor, men jeg har ikke tenkt å laste inn en annen komponent, bare utføre en annen spørring etter data basert på det nåværende valget.

Svar #1

Du må kalle getLocationsBySelection inne i din ngOnInit etter at du har fått alle detaljer av selection fra getSelectionByName-tjenestekallet, og du kan fjerne 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);
        }
      })
}

Relaterte artikler