I am using Angular 12.3 with IG 12.3.

I have a "control panel" which should show if there is data in my scenarios lists. I can verify that data has landed in both lists, but around 33% of the time, the control panel doesn't show up, even though there is data in both lists.

My UI has the following *ngIf:

scenario1List !== undefined && scenario1List !== [] && scenario1List.length > 0 && scenario2List !== undefined && scenario2List !== [] && scenario2List.length > 0

The code to load the data and fill the lists is here:

    let scenarios:scenario[] = await this.scenarioService.getScenariosList(true, true).toPromise();
    console.log('scenarios: ', scenarios);
    this.scenario1List = scenarios, this.scenario2List = scenarios;

The console log returns valid length every time, but doesn't always show the control panel. I discovered this because my Scenario dropdowns (2) were not populating and I assumed it was a timing issue, so I set them not to show unless they were going to populate (with similar *ngIf blocks) and the whole thing seems to not work as expected.

Perhaps someone could tell me what I'm doing wrong?