Angular 在角度10测试期间获取动态ID

我有一个Angular 10应用程序，我在其中迭代一个对象数组，并将结果显示在一个表中，如下所示：

    Rank     | Name
    ----------------------
    First    | John Doe
    ----------------------
    Second   | Jane Doe
    ----------------------
    Third    | John Smith
    ----------------------
    Other    | Jane Smith
    ----------------------
    Other    | Jane John

因此，从响应中，我得到了rank的一个数值，并且我在模板中有适当的登录名来呈现正确的rank文本。此外，秩列中的每个单元格都有一个基于迭代索引的动态ID

现在，我正在尝试为这个组件创建一个测试，我想验证正确的列组号是否呈现了正确的文本

我的每次安装前都是这样的：

beforeEach(() => {
    fixture = TestBed.createComponent(RankComponent);
    mainService = TestBed.inject(MainService);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

我的测试用例是：

it('should check the first rank text', () => {
    spyOn(mainService, 'getPlayerInfo').and.returnValue(of(playerInfoMock));
    component.getPlayerInfo();
    let firstRank = fixture.debugElement.nativeElement.querySelector('#playerRank0');
    expect(firstRank.innerHTML).toBe('First');
});

但是我得到一个错误，它说不能获取null的innerHTML。表似乎没有呈现。

---

我还尝试获取elementById，结果也是一样的。我缺少一些简单的东西吗？

在调用

component.getPlayerInfo（）后，是否需要再次调用
detectChanges
以获得必要的更改？另外，您是否需要在nethtml中检查
，或者只需检查
textContent
或使用
contains
？@AlexanderStaroselsky我尝试在component.getPlayerInfo（）之后调用detectChanges，但得到了相同的结果。我不需要特别检查innerHTML，但问题是fixture.debugElement.nativeElement.querySelector（“#playerK0”）；返回null如果不查看底层代码，这很难进行故障排除，但是您需要检查几件事情。是在
component.getPlayerInfo（）之后呈现的任何预期内容（使用detectChanges），您可以检查调试元素或类似元素的HTML。如果
component.getPlayerInfo（）执行正确，组件上的数据是否准确更新，如检查
组件。使用播放器数据更新了哪些变量？