Angular AfterViewInit内部的属性绑定不会影响视图

我正在Angular项目中使用

Mapbox

，我需要在

component.html

中显示

component.ts

中的一些信息

我使用的是

mat垂直步进器

，其中每一步都是一个新的

组件

：

 <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>

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

  @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;
  }

当

此.updateRelativity（即结果中心[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>



请告诉我一个地方


地方自选


纬度：{{纬度}


经度：{{经度}

特里纳尔
阿凡萨尔

你知道我做错了什么吗？
你应该在这部分使用箭头功能：

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

请注意，如果使用
功能
，则对
此
的引用不再相同。
如果您坚持使用
函数
而不是
箭头函数
，则应在geocoder.on事件之前，在变量中存储对
此
的引用

  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]);
      }
    }
  }

在本部分中，应使用箭头功能：

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

请注意，如果使用
功能
，则对
此
的引用不再相同。
如果您坚持使用
函数
而不是
箭头函数
，则应在geocoder.on事件之前，在变量中存储对
此
的引用

  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]);
      }
    }
  }