组件变量未在单击事件处理程序中传递给传单

Question

我的Angular 4应用程序和Leaflet集成存在一些问题。

我正在更新传递给Leaflets onClick函数的方法中的组件布尔变量。但是，该变量未在View中更新。当我在视图端测试布尔变量的值时，它仍然是假的，而不是真的。

有什么建议吗？感谢。

import { Component, Inject, AfterViewInit, EventEmitter } from '@angular/core';
import * as L from 'leaflet';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'map-body',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements AfterViewInit {

  newMap: L.Map;
  bmIcon: L.Icon;
  tileLayer: L.TileLayer;
  lafBu: L.Marker;
  dalBu: L.Marker;
  houBu: L.Marker;
  detBu: L.Marker;
  denBu: L.Marker;
  buMapData: L.FeatureGroup;

  // tslint:disable-next-line:no-inferrable-types
  isActive: boolean = false;

  // tslint:disable-next-line:no-inferrable-types
  listView: boolean = false;

  constructor(

  ) { }

  ngAfterViewInit() {

    this.newMap = L.map('mapid',{doubleClickZoom: false}).setView([30.224750, -92.019093], 3);

    this.bmIcon = L.icon({
      iconUrl: '../assets/images/ping-location-2.png',
      iconSize: [21, 35],
      iconAnchor: [10.5, 35]
    });

    this.tileLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: '',
      maxZoom: 4,
      minZoom: 2,
      id: 'mapbox.light',
      accessToken: 'pk.eyJ1IjoiZ2FycmV0dG1hbmxleSIsImEiOiJjamVlZDhobGsxNGFpMndvMnRhODZucjM4In0.Tgk5Uhgs8G_Y0jPh_pP8uw'
  });

    this.lafBu = L.marker([30.224750, -92.019093], {
      icon: this.bmIcon,
      title: 'Lafayette'
    });

    this.dalBu = L.marker([32.776664, -96.796988], {
      icon: this.bmIcon,
      title: 'Dallas'
    });

    this.houBu = L.marker([29.760427, -95.369803], {
      icon: this.bmIcon,
      title: 'Houston'
    });

    this.detBu = L.marker([42.331427, -83.045754], {
      icon: this.bmIcon,
      title: 'Detriot'
    });

    this.denBu = L.marker([39.739236, -104.990251], {
      icon: this.bmIcon,
      title: 'Denver'
    });

    this.buMapData = L.featureGroup([this.tileLayer, this.lafBu, this.dalBu, this.houBu, this.denBu, this.detBu])
    .addTo(this.newMap)
    .on('click', this.onSelectedBu);

    this.newMap.invalidateSize();

  }

  toggleList() {
    this.isActive = !this.isActive;
    this.listView = !this.listView;
  }

  closeList() {
    this.isActive = false;
    this.listView = false;
  }

  onSelectedBu(e) {
    if (e.layer._leaflet_id !== undefined || e.layer._leaflet_id !== null) {
      console.log('Yay, I\'m a layer!');
      console.log(e.layer);
      this.isActive = true;
    }
  }
}

<div class="container">
  <div class="row">
    <div [ngClass]="isActive ? 'col-md-8' : 'col-md-12'" > {{isActive}}
      <form class="form-inline">
        <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" name="mapfilter" placeholder="Filter The Map" />
            <button type="submit" class="btn btn-danger">Go!</button>
        </div>
      </form>
      <div id="mapid"></div>
    </div>
      <div class="col-md-4" *ngIf="listView === true">
        <form class="form-inline">
          <div class="form-group mx-sm-2 mb-1">
              <input type="text" class="form-control" name="skillfilter" placeholder="Search Skills" />
              <button type="submit" class="btn btn-danger">Search</button>
          </div>
          <div class="form-group mb-1">
              <button type="button" class="btn btn-danger" (click)="closeList()">X</button>
          </div>
        </form>
        
        <ul class="list-group">
            <li class="list-group-item bg-danger text-light">Andy Lanclos</li>
            <li class="list-group-item">Garret Manley</li>
            <li class="list-group-item">John Doe</li>
            <li class="list-group-item">Michael Smith</li>
            <li class="list-group-item">Harry Love</li>
          </ul>
      </div>
  </div>
</div>