视图操作仅在视图中有一个组件时有效

Question

我有一个angular2组件，它根据从我的实时API接收的数据来操纵SVG图像。

在两个视图中使用完全相同的组件，第一个是列表视图，其中有许多组件实例。

第二个是详细信息组件，其中只有一个组件实例。

但是，该组件仅适用于第二个视图。该组件看起来像：

@Component({
  selector: 'app-line-overview',
  template: `<object id="img" data="assets/img/big_layout.svg" width="292" height="164" #svg></object>`
})
export class LineOverviewComponent {
  stations: string;
  @ViewChild('svg') svg: ElementRef;

  constructor(public socketService: SocketService) { }

  ngOnInit() {
      this.socketService.getStations('api/getStations/' + this.line.name).subscribe(stns => {
        this.stations = stns.stations;
        this.load();
      })
  }

  load() {
      let svgDoc = this.svg.nativeElement.contentDocument;
      if (this.stations) {
        JSON.parse(this.stations).forEach(station => {
          station.element = svgDoc.getElementById(station.name);
          console.log(station)
          station.element.removeAttribute('class');
          if (station.status === 'running') {
            station.element.setAttribute('fill', 'lime');
          }
        })
      }
    }
}

在列表视图中，station.element为空，抛出错误：

  

内联模板：19：24引起：无法读取null的属性'removeAttribute'

更新

见[plunk]（http://plnkr.co/edit/BNK6rbfBUAleXF6X9ckg?p=preview。