Angular 4 Specs：为动态加载的HTML组件编写jasmine规范，给出了空元素

Question

我正在为角度4编写演示应用程序的规范。

虽然组件规格工作正常。 服务注入的规范运行良好。

但是在编写specs动态加载html组件时，我总是得到一个空元素。

我正在使用InMemoryDataService进行异步调用。

请找到以下代码。

HTML

<li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
    <button class="delete"
    (click)="delete(hero); $event.stopPropagation()">x</button>
  </li>

组件

getHeroList(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);

}

功能

it('should display heores in HTML', async(()=>{
  spyOn(heroService, 'getHeroes').and.callFake(()=>{
    return Promise.resolve(HEROES);
  });
  component.getHeroList();

  fixture.whenStable().then(()=>{
    fixture.detectChanges();  
    let de = fixture.debugElement.queryAll(By.css('li'));
    expect(component.heroes.length).toBeGreaterThan(6);
    let heroRows    = fixture.debugElement.queryAll(By.css('li')).map(de => de.nativeElement);
    expect(heroRows.length).toBeGreaterThan(0);
  })      
}));