Angular ngFor not working in specific dialog?

Question

(respPIN and internalNotes are both of type InternalNotes[])

When I set the following in encounter.component.ts:

this.ps.GetInternalNotes(resp.PersonID.toString()).subscribe(respPIN => {
    this.internalNotes = respPIN;
});

I get the ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

So I changed it to

this.ps.GetInternalNotes(resp.PersonID.toString()).subscribe(respPIN => {
  for (let index = 0; index < respPIN.length; index++) { 
            this.internalNotes.push(respPIN[index]);
        }
});
    

I've looked in the debugger in DevTools and it appears fine to me (array of json objects with key value pairs). But the data does not show in the table of the dialog.

This is where I send the data from that component to the dialog

this.dialog.open(DialogInternalNotesThreeComponent, {
          data: {
                data: this.internalNotes
            }
      });

dialog-internal-notes-three.component.ts:

this.internalNotes = this.data;   

dialog-internal-notes-three.component.html:

<table>        
    <tbody>
        <tr *ngFor="let note of internalNotes">
            <td>{{note.CreateDate}}</td>
            <td>{{note.CreatedByText}}</td>
            <td>{{note.Note}}</td>
        </tr>            
    </tbody>
</table>

What am I missing?

Answer 1

Changing the ngFor to include reference to data seemed to resolve this:

<tr *ngFor="let note of internalNotes.data">