Question

我正在尝试使用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>

在我的app html中我有：

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

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

我使用解决方案

创建了plunker

Answer 1

来自User Input dev guide：

如果我们为响应异步事件（如击键）做某事，Angular只会更新绑定（以及屏幕）。

我猜测你在更新标记数组时没有异步事件，因此没有任何因素导致Angular运行其变化检测算法。

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

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

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

setInterval()的作用原因是因为它是由区域修补猴子。

有关详细信息，请参阅Zone。
如果您想了解有关Zone的更多信息，请观看DiSol's plunker。
另见Miško's video。

ng当从谷歌地图标记事件更新@Input时不更新

1 个答案: