How to show data from ts compoenent to HTML compoentn ?

See more:

ASP.NET-Core

Angular7

I work on angular 7 app connected to web api
my problem data show on browser when do right click inspect
but not show on view.html
when make console.log it show data on ts but not display on view

[1,1,"كود الموظف","EmployeeId","Employees",2,2,"الفرع","BranchCode","Employees",3,3,"الاسم","EmployeeName","Employees",4,4,"السن","EmployeeAge","Employees",5,5,"تاريخ الالتحاق","JoinDate","Employees",6,6,"تاريخ الميلاد","BirthDate","Employees",7,7,"الحاله","Active","Employees"]

What I have tried:

on Em

RefListVal: any;

ngOnInit() {
 
    console.log('welcome');
     this.apiservice.getReferenceDataForEmployee('Employees')
    .subscribe( data=>{
     this.RefListVal = data; //SUBSCRIBE HERE
     console.log(data);

     }); 

On ApiService

getReferenceDataForEmployee(tablename : string):Observable<Reference[]> {
              return this.http.get<Reference[]>('https://localhost:44326/api/Reference/'+ tablename);
            }

on html view

<tr *ngFor = "let ref  of RefListVal.References ">
                 <!-- <td> {{ref.rownum}}</td>    -->

                 <td> {{ref.code}} </td>
                 <td> {{ref.tableName}} </td>
                 <td> {{ref.fieldName}} </td>
                 <td> {{ref.arabicCaption }} </td>
                 <td> {{ref.latineCaption }} </td>
             </tr>