1

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

@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);
        }
    }

当我的 map-menu.html 是：

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

在我的应用程序 html 中，我有：

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

并且列表没有更新，但是当我添加注释的 setInterval 时它工作正常。我在那里想念什么？

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

4

1 回答 1

4

来自用户输入开发指南：

Angular 仅在我们响应异步事件（例如击键）时才更新绑定（因此也更新屏幕）。

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

更新：问题不在于没有异步事件，问题在于google.maps.Marker.addListener()Angular 不知道异步事件 ()，因此Zone不会对其进行修补，因此 Angular 在数据变化。run()解决方案是在 Zone 的函数内发出事件：

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

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

之所以setInterval()有效，是因为它是由 Zone 修补的猴子。

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

于 2015-12-19T22:50:12.153 回答