Javascript 视图操纵仅在一个零部件处于视图中时有效

我有一个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');
          }
        })
      }
    }
}

@组件({
选择器：“应用程序行概述”，
模板：``
})
导出类LineOverview组件{
电台：字符串；
@ViewChild（'svg'）svg:ElementRef；
构造函数（公共socketService:socketService）{}
恩戈尼尼特（）{
this.socketService.getStations（'api/getStations/'+this.line.name）.subscribe（stns=>{
this.stations=stns.stations；
这个.load（）；
})
}
加载（）{
让svgDoc=this.svg.nativeElement.contentDocument；
如果（本站）{
JSON.parse（this.stations）.forEach（station=>{
station.element=svgDoc.getElementById（station.name）；
控制台日志（站）
station.element.removeAttribute（'class'）；
如果（station.status===‘running’）{
station.element.setAttribute（'fill'，'lime'）；
}
})
}
}
}

在列表视图中，

station.element

为空，抛出错误：

内联模板：19:24原因：无法读取null的属性“removeAttribute”

更新：

---

看到这个[plunk]（.

很难从这里看出为什么

svgDoc.getElementById（station.name）

不返回元素。@GünterZöchbauer您还需要什么其他信息？可能是一个允许复制的插入器。您的问题不清楚为什么这一行应该找到元素。当

加载（）

被调用，并且

svgDoc

是否真的包含具有该id的元素？我可能错了，但几天前我遇到了类似的问题。似乎您无法在init操作DOM元素。如果您记录

svgDoc

，您将看到它未定义。您应该尝试将load（）放入

ngAfterViewInit（）中

函数或ngOnInit@mickdev之后的任何其他生命周期挂钩，这似乎是导致问题的区域，正如您所建议的，我在我的

load（）中添加了
console.log（svgDoc）

函数，但它不是未定义的，它返回

#document

，但这显然是在加载视图之前，作为我的工作视图的一个姿势，其中的响应看起来像svg元素。但是，我添加了一个

ngAfterViewInit

事件，并调用

this.load（）

，但仍然得到相同的结果。。。