NgZorro Table Angular Not Loading Data Properly

I am trying to load the data which is an array of objects using the ngzorro table

the data I am trying to load is this

{
  "problems": [
    {
      "companies": [
        {
          "color_dark": "#693b73",
          "color_light": "#fdf8a8",
          "logo": null,
          "name": "Apple"
        },
        {
          "color_dark": "#2c6a91",
          "color_light": "#bcb6e2",
          "logo": null,
          "name": "Adobe"
        },
      ],
      "date": "Fri, 12 Apr 2024 00:00:00 GMT",
      "description": "",
      "filename": "codebase/src/Extra_Problems/Searching/FirstBadVersion.java",
      "id": 1,
      "level": "Easy",
      "name": "First Bad Version",
      "notes": "Use Binary Search",
      "remarks": "Kunal Kushwaha",
      "slug": "first-bad-version",
      "status": "Completed",
      "subdirectory": "Searching",
      "type": "Extra Problems",
      "url": "https://leetcode.com/problems/first-bad-version/description/"
    }
  ]
}

This is my component html

<nz-table #filterTable [nzData]="listOfData" nzTableLayout="fixed" [nzPageIndex]="pageIndex" (nzPageIndexChange)="pageChange($event)">
    <thead>
      <tr>
        <ng-container *ngFor="let column of listOfColumns">
          <th *ngIf="column.allowFilter && column.allowSort"
            [nzWidth]="column.width"
            [nzSortOrder]="column.sortOrder"
            [nzSortFn]="column.sortFn"
            [nzSortDirections]="column.sortDirections"
            [nzFilterMultiple]="column.filterMultiple"
            [nzFilters]="column.listOfFilter"
            [nzFilterFn]="column.filterFn"
          >
            {{ column.name }}
          </th>

          <th *ngIf="!column.allowFilter && column.allowSort"
            [nzWidth]="column.width"
            [nzSortOrder]="column.sortOrder"
            [nzSortFn]="column.sortFn"
            [nzSortDirections]="column.sortDirections"
          >
            {{ column.name }}
          </th>

          <th *ngIf="column.allowFilter && !column.allowSort"
            [nzWidth]="column.width"
            [nzFilterMultiple]="column.filterMultiple"
            [nzFilters]="column.listOfFilter"
            [nzFilterFn]="column.filterFn"
          >
            {{ column.name }}
          </th>

          <th nzCustomFilter *ngIf="column.allowSearch && !column.allowFilter && !column.allowSort">
            {{ column.name }}
            <nz-filter-trigger [(nzVisible)]="visibleMap[column.name.toLowerCase()]" [nzActive]="searchValue.length > 0" [nzDropdownMenu]="menu">
              <span nz-icon nzType="search"></span>
            </nz-filter-trigger>
          </th>

          <th *ngIf="!column.allowFilter && !column.allowSort && !column.allowSearch" [nzWidth]="column.width">
            {{ column.name }}
          </th>
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of filterTable.data;let i = index">
        <td><a routerLink="/problem/statement/{{data.slug}}">{{ data.name }}</a></td>
        <td>{{ data.type }}<div *ngIf="data.subdirectory">({{data.subdirectory.replaceAll(":", " -> ")}})</div></td>
        <td>{{ data.level }}</td>
        <td>{{ data.status }}</td>
        <td style="text-align: center;">
          <ng-container *ngIf="data.companies && data.companies.length > 0">
            <div style="justify-content: center;">
              <nz-tag *ngFor="let company of data.companies.splice(0, 5)" [nzColor]="getCompanyColor(company)" (click)="tagClick(company.name)">{{company.name}}</nz-tag>
              <ng-container *ngIf="showMore[i]">
                <nz-tag *ngFor="let company of data.companies.splice(5)" [nzColor]="getCompanyColor(company)" (click)="tagClick(company.name)">{{company.name}}</nz-tag>
              </ng-container>
              <ng-container *ngIf="data.companies.length > 5">
                <nz-tag *ngIf="!showMore[i]" (click)="showMore[i] = true;" [nzColor]="'transparent'">+ More</nz-tag>
                <nz-tag *ngIf="showMore[i]" (click)="showMore[i] = false;" [nzColor]="'transparent'">- Less</nz-tag>
              </ng-container>
            </div>
          </ng-container>

          <ng-container *ngIf="!data.companies || data.companies.length == 0">
            <div> No Company Information </div>
          </ng-container>
        </td>
      </tr>
    </tbody>
</nz-table>

My problem is that even if the company data is provided it always shows as "No Company Information" everything is loaded successfully

On inspecting I found companies data does get loaded but it changes

On clicking on the point where the problem lies it highlights this part

EDIT:

Tried using change detection but the issue still exists to debug I have added this line temporarily

the output of following:

After it I changed from data.companies to data.companies.length then:

Here it shows length always zero but when try using regular printing it shows there is something.

EDIT: I was able to solve this the problem was here

<nz-tag *ngFor="let company of data.companies.splice(0, 5)"

I was using splice method it changed the original array changing from splice to slice solved this issue.