Как применить изменение переменной с помощью Nativescript и Mapbox в Typescript - PullRequest
Новая
       16

Как применить изменение переменной с помощью Nativescript и Mapbox в Typescript

0 голосов
/ 14 июня 2019

Я пытаюсь изменить значение переменной и применить это изменение в представлении.Когда я нажимаю на маркер, я хочу показать информацию на той же странице в «div», который передает «hidden» в «visible»

Я использую функцию, которая изменяет значение переменной 'showInfo ()».Для теста эта функция называется 2 действиями.

  • работа: первое - это вызов с помощью кнопки (см. ПЕРЕДНЯЯ).

  • не работает:во-вторых, это вызов, когда я касаюсь маркера (см. НАЗАД).

    *********************** FRONT HTML *********************** 

<FlexboxLayout  height="100%" width="100%" style="z-index: 1">
        <Mapbox
                accessToken="TOKEN"
                mapStyle="mapbox://styles/MAP"
                latitude="37.7397"
                longitude="-121.4252"
                hideCompass="true"
                zoomLevel="2"
                showUserLocation="true"
                disableZoom="false"
                disableRotation="false"
                disableScroll="false"
                disableTilt="false"
                (mapReady)="onMapReady($event)">
        </Mapbox>
        <Label text="{{infoText}}" width="10%" height="10%" backgroundColor="yellow"></Label>
</FlexboxLayout >

<FlexboxLayout  height="10%" width="80%" class="INFO" [ngStyle]="{'visibility': visibility , 'background-color': 'green', 'z-index': 2 }">
            <Label text="{{infoText }}" width="70%" height="70%" backgroundColor="yellow"></Label>
</FlexboxLayout >

************ НАЗАД **************************************

private map: MapboxViewApi;
visibility: string = 'hidden';
constructor() { }

ngOnInit() {
}


onMapReady(args): void {
    this.map = args.map;
    this.map.addMarkers([
        {
            lat: 37.7397,
            lng: -121.4252,
            title: 'Tracy, CA',
            subtitle: 'Home of The Polyglot Developer! HOHO',
            onTap: () => {
                this.showInfo();
            }
        }
    ]);
}

showInfo() {
    console.log(this.visibility);
    this.visibility = 'visible';
    console.log(this.visibility);
}

КогдаЯ нажимаю кнопку, ярлык, который «скрыт», становится «видимым».Но когда я нажимаю на маркер, функция запускается (значение переменной изменяется), но метка все еще не учитывается.

Похоже, что изменение переменной не поддерживается, когда я использую функцию 'onTap' из Mapbox.

1 Ответ

0 голосов
/ 14 июня 2019

Я подозреваю, что onTap обратный вызов выполняется за пределами NgZone, поэтому ваш компонент не обнаруживает изменения. Попробуйте запустить свой код внутри NgZone 

constructor(private _ngZone: NgZone) {} 

onMapReady(args): void {
    this.map = args.map;
    this.map.addMarkers([
        {
            lat: 37.7397,
            lng: -121.4252,
            title: 'Tracy, CA',
            subtitle: 'Home of The Polyglot Developer! HOHO',
            onTap: () => {
                this._ngZone.run(() => { this. showInfo() });.
            }
        }
    ]);
}
...