Angular 输入时出现 ExpressionChangedAfterItHasBeenCheckedError。 OpenLayers 地图

Question

我的 MapComponent 在 html 中使用 ControlButtonsComponent 并使用 @Input 将来自 openlayers 的地图绑定到 ControlButtons 中。这给了我错误：

core.js:5980 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.
at throwErrorIfNoChangesMode (core.js:6549)
at bindingUpdated (core.js:12660)
at Module.ɵɵproperty (core.js:14475)
at MapComponent_Template (map.component.html:2)
at executeTemplate (core.js:9323)
at refreshView (core.js:9192)
at refreshComponent (core.js:10358)
at refreshChildComponents (core.js:8989)
at refreshView (core.js:9242)
at refreshComponent (core.js:10358)

甚至认为我在选择器中有一个 ngIf="Map"

这是 MapComponent 中的html：

<app-control-buttons *ngIf="Map" [Map]="Map"></app-control-buttons>

其中一个重要元素可能是 Map 在 MapComponent 中的初始化方式（摘自 https://medium.com/runic-software/a-simple-guide-to-openlayers-in-angular-b10f6feb3df1）：

    ngAfterViewInit(): void {
        if (!this.Map) {
            this.zone.runOutsideAngular(() => this.initMap());
        }
        setTimeout(() => this.mapReady.emit(this.Map));
    }

这是控件按钮组件：

import { Component, Input, OnInit } from '@angular/core';
import { Map} from 'ol';

@Component({
    selector: 'app-control-buttons',
    templateUrl: './control-buttons.component.html',
    styleUrls: ['./control-buttons.component.less'],
})
export class ControlButtonsComponent implements OnInit {
    @Input() Map!: Map;
    constructor() {}

    ngOnInit(): void {}
}

Answer 1

啊我找到了解决办法：

将之前的 ngAfterViewInit() 更改为此（我并没有真正使用 emit 做任何事情）。我创建了一个 mapReady 变量，它在地图准备就绪时设置为真：

    ngAfterViewInit(): void {
    if (!this.Map) {
        this.zone.runOutsideAngular(() => this.initMap());
    }
    setTimeout(() => {
        this.mapReady = true
    });
}

并检查 html:

中的 mapReady 变量

<app-control-buttons *ngIf="mapReady" [Map]="Map"></app-control-buttons>

Angular 输入时出现 ExpressionChangedAfterItHasBeenCheckedError。 OpenLayers 地图

Angular ExpressionChangedAfterItHasBeenCheckedError on Input. OpenLayers Map

openlayers

angular