Getting dynamic ID during Angular 10 testing

I have an Angular 10 app in which I am iterating over an array of objects and displaying the results in a table as seen here:

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

So, from the response, I am getting a numerical value for rank, and I have the appropriate login in the template to render the correct rank text. Also, each cell in the rank column has a dynamic ID based on the index of the iteration.

Now, I'm trying to create a test for this component, and I want to verify that the correct rank number is rendering the correct text.

I have my beforeEach setup like this:

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

And my test case:

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');
});

But I get an error that says cannot get innerHTML of null. Seems like the table is not rendering. I also tried getting the elementById, and that leads to the same thing. Am I missing something simple?