Displaying nested data in Angular ngFor set not working

I have a value set that I am trying to display. This is the structure of it. The problem I have is trying to display the third item as the structure of it is slightly different. Note this can be dynamic so it won't always be the third item that has a different structure.

[
  {
    "id": "1b255d6d-f771-4c16-9d64-fdb188dc9298",
    "categoryId": null,
    "filename": "dummy.pdf",
    "url": "http..."
  },
  {
    "id": "8d17ee10-54e0-48eb-8c21-83e7c6ca6751",
    "categoryId": null,
    "filename": "dummy (1).pdf",
    "url": "http..."
  },
  [
    {
      "id": "42b30baf-a945-412e-a53d-803e57c684cf",
      "categoryId": null,
      "filename": "1 Rules of the Road draft1.pdf",
      "url": "http..."
    }
  ],
  {
    "id": "1d0531e0-f0ad-4026-bfa0-5f19fa4fbca0",
    "categoryId": null,
    "filename": "offer.pdf",
    "url": "http..."
  }
]

Here is my HTML

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
  <div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span
        ><img src="img"
      /></span>
      <span>{{ doc.filename }}{{ doc.filetype }}</span> 
      <button (click)="openDocWindow(doc.url)">...</button>
    </div>
  </div>
</div>

I have attempted the below but it does not work

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
  <div *ngFor="let doc of candidateDocuments; let i = index" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
      <span
        ><img src="img"
      /></span>
      <span>{{ doc.filename }}{{ doc.filetype }}</span> 
      <button (click)="openDocWindow(doc.url)">...</button>
      <div *ngFor="let userdoc of doc.Array" class="ui-g-6 ui-sm-12">
          <div class="doc-container">
            <span
              ><img src="img"
            /></span>
            <span>{{ userdoc.filename }}{{ userdoc.filetype }}</span> 
            <button (click)="openDocWindow(userdoc.url)">...</button>
          </div>
        </div>
    </div>
  </div>
</div>

By using *ngIf else condition:

<div *ngIf="candidateDocuments" class="ui-g-12 ui-md-12 ">
<div *ngFor="let doc of candidateDocuments" class="ui-g-6 ui-sm-12">
    <div class="doc-container">
        <div *ngIf="doc.filename; else other">
            <span>{{ doc.filename }}{{ doc.filetype }}</span> 
  <button (click)="openDocWindow(doc.url)">...</button>
   </div>
   <ng-template #other>

        <div *ngFor="let d of doc" class="ui-g-6 ui-sm-12">
     {{d.filename}}
        <button (click)="openDocWindow(d.url)">...</button>
          </div>
   </ng-template>
</div>