属性 AfterViewInit 中的绑定不影响视图

Question

我在我的 Angular 项目中使用 Mapbox，我需要在我的 component.html 中显示一些来自我的 component.ts.

的信息

我正在使用 mat-vertical-stepper，其中每个步骤都是新的 component:

 <mat-vertical-stepper #stepper>
      ...
      <mat-step [stepControl]="locationStepForm">
           <ng-template matStepLabel>Localização</ng-template>
           <app-location-step [locationStepForm]="locationStepForm"></app-location-step>
      </mat-step>
      ...
 </mat-vertical-stepper>

所以，在 locationStepForm 我有一个 Mapbox 地图。为了让地图正常工作，我将其初始化放在 AfterViewInit 方法中：

  @Input() locationStepForm: FormGroup;

  ngAfterViewInit() {
    const container = document.getElementById('map');

    if (container) {
      var map = new Mapboxgl.Map({
        container: this.map.nativeElement, // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-51.186971, -29.1836891], // starting position, LNG/LAT
        zoom: 15 // starting zoom
      });
    }
  }

问题是在某些时候，我需要调用一个函数来更新属性以便它的值可以通过属性绑定显示在视图中。

  @Input() locationStepForm: FormGroup;

  latitude: number = 0;  

  ngAfterViewInit() {
    const container = document.getElementById('map');

    if (container) {
      var map = new Mapboxgl.Map({
        container: this.map.nativeElement, // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-51.186971, -29.1836891], // starting position, LNG/LAT
        zoom: 15 // starting zoom
      });

      geocoder.on('result', function (e) {
         geocoder.clear();
         this.updateLatitude(e.result.center[1]);
      }
    }
  }

  updateLatitude(latitude: number) {
     this.latitude = latitude;
  }

当调用 this.updateLatitude(e.result.center[1]); 时，出现此错误：

如果我直接访问属性，我的 component.html.

中不会显示 信息

  ngAfterViewInit() {
    ...

    geocoder.on('result', function (e) {
        ...
        this.latitude = e.result.center[1];
    }
  }

这是我的 component.html:

<form [formGroup]="locationStepForm">

    <p class="m-l-10">
        <span class="text-header">Informe a localização</span>
    </p>

    <div id="geocoder" class="geocoder"></div>
    <div #mapElement id="map" class="map"></div>

    <div>
        <p>
            <span class="text-header">Local selecionado</span>
        </p>

        <p>
            <span>Latitude: {{latitude}}</span>
        </p>

        <p>
            <span>Longitude: {{longitude}}</span>
        </p>
    </div>

    <div>
        <button mat-button matStepperPrevious>Retornar</button>
        <button mat-button matStepperNext class="button-colored m-l-10">Avançar</button>
    </div>
</form>

知道我做错了什么吗？

Answer 1

你应该在这部分使用箭头函数：

  geocoder.on('result', (e) => { //here use arrow function
    geocoder.clear();
    this.updateLatitude(e.result.center[1]);
  }

请注意，如果您使用 function，对 this 的引用将不再相同。如果您坚持使用 function 而不是 arrow function，您应该在 geocoder.on 事件之前在变量中存储对 this 的引用。

  ngAfterViewInit() {
    const container = document.getElementById('map');
    var self = this;

    if (container) {
      var map = new Mapboxgl.Map({
        container: this.map.nativeElement, // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-51.186971, -29.1836891], // starting position, LNG/LAT
        zoom: 15 // starting zoom
      });

      geocoder.on('result', function (e) {
         geocoder.clear();
         self.updateLatitude(e.result.center[1]);
      }
    }
  }

属性 AfterViewInit 中的绑定不影响视图

Property binding inside AfterViewInit is not affecting the view

mapbox

mapbox-gl-js

angular