分配后未设置的变量

Question

我已经为mapData和mapID创建了全局变量。我正在调用一个iframe来检索这些值。我在一个单独的函数中分配这些值。当我尝试在其他函数中使用console.log mapID / mapData时，它返回未定义。

address.component.ts

import { Component, OnInit, HostListener } from '@angular/core';
import { HttpClient, HttpParams } from "@angular/common/http";
import { VehicleService } from '../vehicle.service';
import { NgForm } from '@angular/forms';
import { MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
import { Overlay, BlockScrollStrategy } from '@angular/cdk/overlay';
import { BehaviorSubject } from 'rxjs';

export function scrollFactory(overlay: Overlay): () => BlockScrollStrategy {
  return () => overlay.scrollStrategies.block();
}

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css'],
  providers: [{ provide: MAT_SELECT_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }]
})
export class AddressComponent implements OnInit {
  
  data: any;
  mapData: any;
  mapID: string;
  myData: BehaviorSubject<string> = new BehaviorSubject(null);

  address: any;
  enteredValue: string;
  show: boolean;
  rs_address_id: string;
  //Response fields
  street: string;
  streetNo: string;
  complex: string;
  majorComplex: string;
  suburb: string;
  subplace: string;
  city: string;
  municipality: string;
  province: string;
  postalCode: string;
  fullAddr: string;
  shortAddr: string;
  mapCode: string;
  lat: string;
  lon: string;
  subplaceID: string;

  constructor(private http: HttpClient, public vehicleService: VehicleService) { 
    
  }
    ngOnInit(){  
    this.show = false;
    this.mapData = '';
    this.mapID = '';

    window.addEventListener('message', this.map, false);
    
  }
    
map(message){
        if (message.origin !== 'https://integrate-dev.riskscape.pro'){
          return;
        }
        this.mapData = message.data;
        this.mapID = this.mapData.feature.properties.rs_address_id;
        console.log('DATA ' + this.mapData);
        console.log('map ID ' + this.mapID);
      }

onGetAddr(){
    
    console.log('Map Data ' + this.mapID);
    const params = new HttpParams()
    .set('rs_address_id', this.mapID);

    console.log(params);
}

address.component.html

<div class="map-container">
    <iframe src="https://integrate-dev.riskscape.pro/maps?address_search=1&unit_selection=1" name="iframe" id="iframe" style="width: 100%; height: 500px;">
    </iframe>
</div>


<div>
    <button mat-raised-button color="primary" class="btn" (click)="onGetAddr()">Enter</button>
</div>