0

我有一个带有 Angular 谷歌地图的 Angular 应用程序（13.0.2）。我也在使用 agm 标记。

在模板中，我有一个按类型过滤地图点的下拉列表。在过滤过程中，我想放置一个加载 div，并隐藏地图。这由isLoading布尔值控制。

问题是无论我做什么，它都会等待过滤器发生，然后才呈现加载 div。我记录了isLoading值，它在应该的时候评估为 true，但是似乎 Angular 正在等待地图点在渲染之前完成过滤......

这是模板中的下拉菜单：

<div class="col-md-4">
   <div class="a-common-header">
        <label for="agm-tecnhology" class="color-light-blue h4">{{technologyLabel}}</label>
   </div>
   <div class="form-group">
        <select class="form-control installation-type-dropdown" id="agm-tecnhology" [value]="selectedInstallationType" (change)="onFilterByTechnology($event.target.value)" [disabled]="isLoading">
            <option value="all">{{showAllLabel}}</option>
            <option *ngFor="let technology of technologies" [value]="technology">{{ technology }}</option>
        </select>
    </div>
</div>

这是onFilterByTechnology，它调用的过滤方法：

onFilterByTechnology(technology) {    
    this.isLoading = true;
    
    this.selectedTechnology = technology;

    this.filterByTechnology();   
}

filterByTechnology() {
    this.infoWindowOpened = null;  

    this.waypoints = this.waypointsInitial.filter((marker) => {
        return this.selectedTechnology === 'all' && this.selectedCountry === 'all' ?
                marker : 
                this.selectedTechnology === 'all' && this.selectedCountry !== 'all' ?
                marker.Country === this.selectedCountry :
                this.selectedTechnology !== 'all' && this.selectedCountry === 'all' ?
                marker.Technology === this.selectedTechnology :
                marker.Technology === this.selectedTechnology && marker.Country === this.selectedCountry;          
    });

    this.isLoading = false;
}

这是模板中的地图：

<agm-map class="o-agm" [ngClass]="isLoading ? 'hide' : ''" [fitBounds]="bounds" [zoom]="defaultZoom" [minZoom]="2" [maxZoom]="18" [latitude]="latitude" [longitude]="longitude">
<appDirectionsMap [mapData]="mapData" (routeChanged)="routeChangedHandler($event)"></appDirectionsMap>
<ng-container *ngIf="hasRadius">
    <agm-circle *ngFor="let marker of waypoints" [latitude]="marker.Latitude" [longitude]="marker.Longitude" [radius]="circleRadiusInKm" [fillColor]="'#2777B8'" [fillOpacity]="0.4" [strokePosition]="0" [strokeColor]="'00205B'" [strokeOpacity]="0.4" [strokeWeight]="0.5" (circleClick)="circleWasClicked($event, circleInfoWindow)">
        <agm-info-window [latitude]="clickLat" [longitude]="clickLng" #circleInfoWindow>
            <ng-container [ngTemplateOutlet]="markerDetails" [ngTemplateOutletContext]="{marker:marker}"></ng-container>
        </agm-info-window>
    </agm-circle>
</ng-container>

<ng-container *ngIf="!hasRadius">
    <agm-marker-cluster [averageCenter]="true" [maxZoom]="17" [styles]="[{url: 'Frontend/assets/images/cluster.png', textColor: '#fff', textSize: '14', height: '36', width: '36'}]">
        <agm-marker *ngFor="let marker of waypoints" [style.backgroundColor]="red" [iconUrl]="'Frontend/assets/images/markerdarkblue.png'" [latitude]="marker?.Latitude" [longitude]="marker?.Longitude" (markerClick)="markerWasClicked(markerInfoWindow)">
            <agm-info-window [latitude]="clickLat" [longitude]="clickLng" #markerInfoWindow>
                <ng-container [ngTemplateOutlet]="markerDetails" [ngTemplateOutletContext]="{marker:marker}"></ng-container>
            </agm-info-window>
        </agm-marker>    
    </agm-marker-cluster>            
</ng-container>

所以我在技术上进行过滤，isLoading是真的，但是直到过滤之后地图才得到隐藏类。过滤器完成后，添加了隐藏类，我得到了加载 div 等。

就好像地图以某种方式阻止了更新，直到过滤完成。我尝试强制detectChanges()，但无济于事。

有谁知道我可能做错了什么？

非常感谢 ：）

4

2 回答 2

0

这是一种可行的方法-有条件地将hidden属性设置为<agm-map>：

[attr.hidden]="loading ? true : null"

Stackblitz：https ://stackblitz.com/edit/angular-google-maps-agm-map-xbhve9?file=app%2Fapp.component.html

于 2022-02-16T16:53:35.647 回答
0

也许不是答案，而是一种解决方法-

我在 filterByTechnology() 上添加了一个超时，现在它可以正常工作了。

setTimeout(() => this.filterAdBluePlantsByTechnology(), 0);
于 2022-02-16T10:58:08.870 回答