typescript - 无法访问 DxDataGrid 的 DOM 元素

Question

我正在尝试通过其 id 访问 dx-data-grid 的 DOM 元素，问题是我得到的都是空的，我不知道为什么，有什么想法吗？

HTML 代码：

<div *dxTemplate="let data of 'compteursTemplate'">
    <dx-data-grid
      #tabCompteurCampagne
      id="liste-compteur"
      [showBorders]="true"
      [dataSource]="listeCompteur"
      (onRowInserting)="ajouterCompteurALaCampagne($event)"
      (onRowRemoving)="supprimerCompteurCampagne($event)"
      (onRowUpdated)="modifierCompteurCampagne($event)">
      <dxo-editing
        mode="row"
        [allowAdding]="true"
        [allowUpdating]="true"
        [allowDeleting]="true"
        [useIcons]="true">...
 </dx-data-grid>

打字稿代码：

let spy_ajouterCompteurALaCampagne = spyOn(component, "ajouterCompteurALaCampagne");
    const element = fixture.debugElement.query(By.css('#liste-compteur')); // null
    element.componentInstance.instance.option('loadingTimeout', undefined);  //Cannot read property 'componentInstance' of null
    element.componentInstance.instance.getDataSource().load();  
    element.nativeElement.onRowInserting.emit();*

    expect(spy_ajouterCompteurALaCampagne).toHaveBeenCalledTimes(1);