Question

我有角度的组件。我从API获取数据，然后实例化一个新对象来创建一个地图。但是我无法在订阅功能之外访问变量。我也无法访问我的方法。

maps.service.ts

这部分，从api获取数据

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class MapsService {

constructor(private http: HttpClient) { }

getMap(params) {
     console.log('Service', params);
     return this.http.get('/api/posts/' + params.id);
    }
}

map.component.ts 在这里，我将来用google构建地图

import { Component, OnInit } from '@angular/core';
import {MapsService} from '../maps.service';
import {ActivatedRoute} from '@angular/router';
import {MapPath} from '../map-path';

@Component({
    selector: 'app-maps',
    templateUrl: './maps.component.html',
    styleUrls: ['./maps.component.css']
})

export class MapsComponent implements OnInit {

    results: any;
    params: {};
    test: any;

    constructor(
        private mapsService: MapsService,
        private route: ActivatedRoute,
    ) { }

    ngOnInit() {
        this.route.params.subscribe( params => {
        this.params = params;
    });

    this.mapsService.getMap(this.params).subscribe(
        data => {

            this.results = data;
            this.test = new MapPath(data, 'test');
        },
        err => {
            console.log('Error occured', err);
        });

    console.log('this.test', this.test.getX());
    console.log('this.results', this.results);

     }

}

地图path.ts 这里从geoJSON

获取不同的属性

export class MapPath {
    test: string;

    constructor(path: any, test: string) {
        this.test = test;
        console.log('Path', path);
        console.log('test', test);
    }

    getX() {
        return this.test;
    }
}

感谢。

Answer 1

您的问题是Observables是异步函数，这意味着您的订阅回调将晚于this.mapsService.getMap调用后的console.log调用。

这是由Observables的异步特性保证的。

您可以在订阅功能中移动控制台日志，也可以创建另一个订阅。

希望这有帮助。

无法访问订阅

1 个答案: