變數未在控制臺日志中以角度顯示在函式之外

我正在嘗試在另一個函式中使用變數來使用角度創建地圖示記。我將資料存盤在函式中并在一個函式中顯示在控制臺上但是當在另一個函式中使用資料時它不起作用：

組件.ts：

    import { HttpClient } from '@angular/common/http';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DAFormFac } from 'src/app/models/daformfac.interface';
import { DaformfacserviceService } from 'src/app/service/daformfacservice.service';
declare const L: any;
import { MocMapService } from 'src/app/service/moc-map.service';
import { map as MapData } from 'rxjs';

@Component({
  selector: 'app-daform-fac-view-full',
  templateUrl: './daform-fac-view-full.component.html',
  styleUrls: ['./daform-fac-view-full.component.css'],
})
export class DaformFacViewFullComponent implements OnInit {
  daformfac: DAFormFac[] = [];

  formID: string;
  getparamformid: any;
  daformfacs: any;

  latitude: any;
  longitude: any;

  private map: L.Map;
  constructor(
    private daformfacservice: DaformfacserviceService,
    private route: ActivatedRoute,
    private mapService: MocMapService,
    private http: HttpClient,
  ) {}

  ngOnInit(): void {
    console.log(
      this.route.snapshot.paramMap.get('facviewid'),
      ' : ID of report'
    );
    this.getparamformid = this.route.snapshot.paramMap.get('facviewid');
    this.daformfacservice
      .getOneDAFacForm(this.getparamformid)
      .subscribe((daFormFac: DAFormFac) => {
        this.daformfacs = daFormFac;
        console.log(daFormFac, 'response of form');
        this.latitude =  daFormFac['latitude'];
        this.longitude = daFormFac['longitude'];

        console.log(this.latitude, this.longitude, "cords")
      });
    let map = L.map('map').setView([10.536421, -61.311951], 8);
    L.tileLayer(
      'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
      {
        attribution:
          'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken:
          'pk.eyJ1IjoiZGlsbG9uciIsImEiOiJjbDB6MGdlbW8xNnZuM2lqbmJnNWZkNzY0In0.cfAOIAy5foQsoUlHhpYSjQ',
      }
    ).addTo(map);
    var marker = L.marker([this.latitude, this.longitude]).addTo(map);
    console.log(this.latitude, this.longitude, "in marker")
    //10.1896062, -61.5282025
    //this.latitude, this.longitude
  }
}

服務：

getOneDAFacForm(id: string) {
    return this.http.get<any>("http://localhost:3000/DAFacility/" id)
    .pipe(map((res:any)=>{
      return res;
    }))
  }

此函式獲取資料條目并存盤 2 個變數緯度和經度：

this.daformfacservice
          .getOneDAFacForm(this.getparamformid)
          .subscribe((daFormFac: DAFormFac) => {
            this.daformfacs = daFormFac;
            console.log(daFormFac, 'response of form');
            this.latitude =  daFormFac['latitude'];
            this.longitude = daFormFac['longitude'];
    
            console.log(this.latitude, this.longitude, "cords")
          });

結果是

但是，當嘗試訪問函式之外的資料時，控制臺是空白的。

var marker = L.marker([this.latitude, this.longitude]).addTo(map);
console.log(this.latitude, this.longitude, "in marker")

它不顯示且不可訪問。我該怎么辦？

uj5u.com熱心網友回復：

您在 api 呼叫回傳資料之前呼叫this.latitudeand變數。this.longitude請嘗試以下

 this.daformfacservice
  .getOneDAFacForm(this.getparamformid)
  .subscribe((daFormFac: DAFormFac) => {
    this.daformfacs = daFormFac;
    console.log(daFormFac, 'response of form');
    this.latitude =  daFormFac['latitude'];
    this.longitude = daFormFac['longitude'];
    console.log(this.latitude, this.longitude, "cords")
    addMarker(); // called marker for map position
  });

這里我在api呼叫成功后呼叫了addMarker。

addMarker() {
  var marker = L.marker([this.latitude, this.longitude]).addTo(map);
  console.log(this.latitude, this.longitude, "in marker");
}

uj5u.com熱心網友回復：

您的函式getOneDAFacForm將異步執行，這意味著您正在嘗試在初始化之前訪問變數（ this.latitude、this.longitude ）。

函式外的這一行將console.log(this.latitude, this.longitude, "in marker")在這些行之前執行

this.latitude =  daFormFac['latitude'];
this.longitude = daFormFac['longitude'];
 
   

標籤：javascript 有角度的

上一篇：從類ObservableObject中的視圖傳遞變數？

下一篇：我不得不使用for回圈來遍歷字串中的每個字符，但代碼無法正常作業