Angular 2无法使用socket.io

Question

我是Angular 2中的新手，我正试图在谷歌地图上显示标记，数组为 [{id：“1”，lat：“”，long：“”}，{id：“2”， lat：“”，long：“”}} ，在socket里面我能够获取 this.markers 中的数据但是在函数之外我的意思是在html上数据没有显示，如果我在外面打印它，则标记变量超出范围并且显示未定义

代码 -

import { Component, OnInit, ElementRef, OnDestroy } from '@angular/core';
import { ProjectService } from '../service/project.service';
import { AuthenticationService } from '../service/authenticate.service';
import { ChatService } from './chat.service';
import { AgmCoreModule } from 'angular2-google-maps/core';
import * as io from 'socket.io-client';
@Component({
    selector: 'car',
    templateUrl: 'car.component.html',
    styles: [` .sebm-google-map-container {
       height: 300px;
     }`]
})
export class carDetails implements OnInit {
    public markers: any[];
    private url = 'http://localhost:2222';
    private socket;
    connection;
    title: string = 'Map';
    lat: number = 22.57305679;
    lng: number = 88.43082201;
    public cabData: any = [];
    constructor(
        private AuthenticationService: AuthenticationService,
        private _elementRef: ElementRef
    ) { }

    ngOnInit() {
        this.socket = io(this.url);
        this.socket.emit("carArrayPosition", this.cabData);
        this.socket.on('currentCarPositionData', (data) => {
            this.markers = data;
           console.log(this.markers); //printing the data
        }); console.log(this.markers); //not printing data
    }



    logout() {
        this.AuthenticationService.logout();
    }

}