I have a Kanban component that when first displayed does not show the tasks

<smart-kanban class="task-smart-kanban" id="kanban"
              [collapsible]="collapseColumns"
              [dataSource]="tasks"
              [columns]="kanbanColumns"
              [taskDue]="true"
              [formatStringDate]="'dd MMM yyyy'"
              [taskUserIcon]="false"
              [taskActions]="true"
>
</smart-kanban>

I have an RxJS subscribe method that retrieves the data asynchronously

this.queryPageSub = this.taskStore.pageOfGdTasks$.pipe(
  filter((data ) => (data !== null) && (data.tasks?.length > 0)),
  tap( (aPage) => {
    const aList = new Array();
    if (aPage.tasks.length > 0) {
      aPage.tasks.forEach((aTask) => {
        aList.push(
          {
            id: aTask.id,
            dueDate: aTask.scheduledFinish,
            status: this.getStatus(aTask),
            text: aTask.name
          });
      });
      this.tasks = aList;
    } else {

     this.tasks = null;

}
 })
).subscribe();

The data is retrieved and the ‘tasks’ array does have valid values
Any suggestions?
There is a paging mechanism in my web app that allows me to move forward and back.  If I go forward and then back again the data is shown.