I am sending data from a component page to a dialog.

I am able to receive the data, but when I try to use it in ngFor I get the error:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

I've looked through 9 different SO articles on this error but I still can't seem to solve. My original code was:

Typescript:

(interface file)

export interface IPersonInternalNotes {
PersonID       : number;
Note            : string;
CreatedBy       : number;
CreatedByText   : string;
CreateDate      : string;
ModifiedBy      : number;
ModifiedByText  : string;
ModifiedDate    : string;
DeletedBy       : number;
DeletedByText   : string;
DeleteDate      : string;
}

(component file)

internalNotes: IPersonInternalNotes[] = [];
@Inject(MAT_DIALOG_DATA) public data: IPersonInternalNotes[] //in constructor)
this.internalNotes = this.data; //in  ngOnInit

HTML:

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

Here is what the data looks like in the debugger:

I've tried many variations such as:

var myData = Object.keys(this.data).map((k) => this.data[k]);

for (let index = 0; index < myData.length; index++) {
     this.internalNotes.push(myData[index]);
}

and

this.data.forEach(element => {
     this.internalNotes.push(element);
});

and changing the html to

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

but it got the error: “Property 'data' does not exist on type 'IPersonInternalNotes[]”

What am I missing? I must not be understanding something about the data type.