当@Input 从谷歌地图标记事件更新时不更新 [英] ngFor not updating when @Input updated from google map marker event

问题描述

我正在尝试使用 angular2 构建一个简单的应用程序，我有以下组件:

@Component({选择器:'地图菜单'，templateUrl: './angular-app/components/map-menu.html'})导出类 MapMenuComponent {@Input() selectedMarkers: Array;构造函数(){//setInterval(() => {//console.log(this);//}, 1000);}}

当我的 map-menu.html 是:

<li *ngFor="#marker of selectedMarkers #i = index"><a href="#">{{marker.data.name}}</a></li>

在我的应用 html 中:

<map-menu [selectedMarkers]="selectedMarkers"></map-menu>

并且列表没有更新，但是当我添加注释的 setInterval 时它工作正常.我在那里错过了什么?

我已经使用解决方案创建了一个 plunker

解决方案

来自 用户输入开发指南:

<块引用>

Angular 只会在我们对异步事件(例如击键)做出响应时更新绑定(以及屏幕).

我猜你在更新标记数组时没有异步事件，因此没有什么会导致 Angular 运行其更改检测算法.

更新:问题不在于没有异步事件，问题在于异步事件 (google.maps.Marker.addListener())Angular 不知道，因此 Zone 不会修补它，因此 Angular 不会运行它数据变化时的变化检测算法.解决方案是在 Zone 的 run() 函数中发出事件:

marker.addListener('click', () => {this.zone.run(() => {this.markerClickEvent.next({data:{name: 'another'}});});});

这将导致 Angular 运行其更改检测算法，注意更改并更新视图.

setInterval() 起作用的原因是因为它是由 Zone 修补的.

有关详细信息，请参阅 DiSol 的 plunker.
如果您想了解有关 Zone 的更多信息，请观看 Miško 的视频.
另请参阅NgZone API 文档.>

I'm trying to build a simple app with angular2, I have the below component:

@Component({
    selector: 'map-menu',
    templateUrl: './angular-app/components/map-menu.html'
})
export class MapMenuComponent {
    @Input() selectedMarkers: Array<google.maps.Marker>;
    constructor() {
    //      setInterval(() => {
    //          console.log(this);
    //      }, 1000);
        }
    }

when my map-menu.html is:

<ul class="nav nav-sidebar">
    <li *ngFor="#marker of selectedMarkers #i = index"><a href="#">{{marker.data.name}}</a></li>
</ul>

and in my app html I have:

<map-menu [selectedMarkers]="selectedMarkers"></map-menu>

and the list is not being updated, BUT when I'm adding the commented setInterval it is working fine. what am I missing there?

I've created a plunker with the solution

解决方案

From the User Input dev guide:

Angular only updates the bindings (and therefore the screen) if we do something in response to asynchronous events such as keystrokes.

I'm guessing you don't have an asynchronous event when the markers array is updated, hence nothing is causing Angular to run its change detection algorithm.

Update: The issue was not that there wasn't an asynchronous event, the issue was that the asynchronous event (google.maps.Marker.addListener()) is not known by Angular, hence Zone does not monkey patch it, hence Angular doesn't run its change detection algorithm when the data changes. The solution is to emit the event inside Zone's run() function:

marker.addListener('click', () => {
   this.zone.run(() => {
      this.markerClickEvent.next({data:{name: 'another'}});
   });
});

This will cause Angular to run its change detection algorithm, notice the change, and update the view.

The reason setInterval() works is because it is monkey patched by Zone.

See DiSol's plunker for more details.
If you want to learn more about Zone, watch Miško's video.
See also NgZone API doc.

这篇关于当@Input 从谷歌地图标记事件更新时不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！