Question

我有一个Google Map，将其拖动时会触发新数据从服务器获取并显示在单独的组件中。

具体地说，我有一个数据服务，该数据服务使用BehaviourSubject来保持组件之间的API数据同步：

@Injectable()
export class MyService {

  private _items: BehaviorSubject<any[]> = new BehaviorSubject([]);
  public items: Observable<any[]> = this._items.asObservable();

  updateItems() {
    this.http.get('...').subscribe(items => {
      this._items.next(items);
    })
  }
}

我将在单独的组件中显示更新的项目：

@Component({
  selector: 'panel',
  template: '<ul><li *ngFor="item of (myService.items | async)">{{item.name}}</li></ul>',
})
export class Panel {

  constructor(public myService: MyService) {
  }
}

在触发具有Google Map的组件的更新时：

@Component({
  selector: 'map',
  template: '<div #map></div>',
})
export class Parent {

  constructor(public myService: MyService) {
  }

  loadMap() { ... }

  ngOnInit() {
      this.loadMap().then(map => {
          map.addListener('idle', function() {
              that.myService.updateItems();
          });
      });
  }
}

问题是面板组件中未显示项目。 After some investigating我已经意识到这是与在Google Map事件处理程序中调用updateItems()函数有关的。

我想这与变更检测和Angular运行循环有关，但是我对为什么它不起作用了解得不多？

我是否需要手动触发更改检测以使用户界面在地图事件和list()调用之后更新？

通过非角度地图事件更新主题/可观察性

0 个答案: