角- agm似乎在阻止渲染。

Question

我有一个角应用程序(13.0.2)，与角谷歌地图。我也在使用agm标记。

在模板中，我有一个下拉列表，它按类型过滤映射点。当过滤正在进行时，我想要放置一个加载div，并隐藏映射。这是由isLoading布尔值控制的。

问题是，无论我做什么，它都会等待过滤器发生，然后才会呈现加载div。我记录了isLoading值，它在应该的时候计算为true，但是在呈现之前，角似乎在等待映射点完成过滤。

这是模板中的下拉列表：

<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()，但没有结果。

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

非常感谢:)

Answer 1

也许不是一个答案，而是一个解决办法-

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

setTimeout(() => this.filterAdBluePlantsByTechnology(), 0);

Answer 2

下面是一种可行的方法--在hidden上有条件地设置<agm-map>属性

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

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