*ngFor not displaying an array of objects in angular using Typescript

I cannot seem to figure this one out even in searching all the answers for this issue. I have tried using a table, ul and div and nothing seems to be able to show the values of the json object that I am able to output onto the html page when I am using a *ngFor. I see the object on the html page using pipe json and I think I am using it correctly but nothing is displaying

Service Call

this.ioltaService.getContactIOLTAHistories(this.user.ContactId).subscribe(res => {
this.rowData = res.Data.map(row => {
if (row.IOLTABankName == this.OTHER_BANK_NAME) {
row.IOLTABankName = row.Institution;
}
if(row.IOLTAAccountNo != null){
let maskStr = "";
for (let i = 0; i < row.IOLTAAccountNo.length; i++) {
maskStr = maskStr + "X";
}
let shownPart = row.IOLTAAccountNo.substring(row.IOLTAAccountNo.length - 3);
row.IOLTAAccountNoMasked = maskStr + shownPart;
}
return row;
});
this.rowData.sort((a, b) => a.IOLTABankName.localeCompare(b.IOLTABankName));
})


HTML

<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Bank</th>
<th>Account Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bank of rowData; let i = index">
<td>{{ bank.CASHBankName }}</td>
<td>{{ bank.CASHAccountNoMasked }}</td>
</tr>
</tbody>
</table>


JSON object

[ { "CASHHistoryId": "1111111111111111", "Name": null, "Attor": "311111", "CertDate": null, "Practice": false, "Hardship": false, "Institution": "Centre Bank", "CASHAccountNo": "1234", "Number": null, "Judge": false, "Participation": null, "AccountStatus": 1, "UserId": "judinterp", "CASHBank": "11111111111111", "CASHBankName": "Centre Bank", "State": 0, "CASHAccountNoMasked": "XXXX234" }, { "CASHHistoryId": "01218dad-c83b-f011-b81c-00505697dda7", "Name": null, "Attorney": "1111111111111", "CertificationDate": null, "DoesNotPractice": false, "Hardship": false, "Institution": "Citizens Bank", "IOLTAAccountNo": "1213123", "Number": null, "Judge": false, "Participation": null, "AccountStatus": 1, "UserId": "medat", "IOLTABank": "1111111111111", "CASHBankName": "Citizens Bank", "State": 0, "CASHAccountNoMasked": "XXXXXXX123" } ]


The table seems to know there are two rows but no value is displayed

Nothing to seems to show anything

<div class="large-field-width">
<div class="input-group">{{rowData | json}}
<ul *ngFor="let row of rowData"><li>{{row.CASHBankName}}</li></ul>
<div *ngFor="let row of rowData | keyvalue">
<span>Bank: {{row.CASHBankName}}</span>
<span>Account Number: {{row.CASHAccountNoMasked}}</span>
<br>
</div>
</div>
</div>

Continue reading...