Data not display on component.html although it display on variable this.reflistval

See more:

Typescript

ASP.NET-Core

WebAPI2

, +

I work on project angular 7 with asp.net web API core 2.1
data display on reference.component.ts ngoninit event variables

this.RefListVal

but not show on Reference.component.html
my web API function

[HttpGet("{tableName}")]
       public List<object> GetColumnNames([FromRoute] string tablename)
       {

         var columnNames = new List<object>();
           using (var command = _context.Database.GetDbConnection().CreateCommand())
           {

               command.CommandText = $"SELECT row_number() over (order by code asc ) as rownum,code ,ArabicCaption, COLUMN_Name,TableName  FROM INFORMATION_SCHEMA.COLUMNS left join ReferenceFiles on INFORMATION_SCHEMA.COLUMNS.COLUMN_Name=ReferenceFiles.FieldName and INFORMATION_SCHEMA.COLUMNS.TABLE_NAME=ReferenceFiles.TableName WHERE TableName =  N'{tablename}'  and TABLE_NAME= N'{tablename}'";

               _context.Database.OpenConnection();
               using (var reader = command.ExecuteReader())
               {
                   if (reader.HasRows)
                   {
                       while (reader.Read())
                       {
                           columnNames.Add((Int64)reader["rownum"]);
                           columnNames.Add((Int32)reader["code"]);
                           columnNames.Add((string)reader["ArabicCaption"]);
                           columnNames.Add((string)reader["COLUMN_Name"]);
                           columnNames.Add((string)reader["TableName"]);
                       }
                   }
                   else
                   {
                       columnNames.Add("Not Found");
                   }
               }
           }
           return columnNames;

       }

the result as following

[1,1,"كود الموظف","EmployeeId","Employees",2,2,"الفرع","BranchCode","Employees",3,3,"الاسم","EmployeeName","Employees"]

How to display the result on reference.component.html angular 7

What I have tried:

on api service

referencelist:Reference[];

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

on reference.compoent.ts

RefListVal: any;

ngOnInit() {
   console.log('welcome');
    this.apiservice.getReferenceDataForEmployee('Employees')
   .subscribe( data=>{
    this.RefListVal = data; //data display here on reflistval but not show on component.html
    console.log(this.RefListVal);

    });

on reference.component.html

<tr *ngFor = "let ref  of RefListVal ">
                  <!-- <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>

this.reflistval display on inspect browser as

0: 1
1: 1
2: "كود الموظف"
3: "EmployeeId"
4: "Employees"
5: 2
6: 2
7: "الفرع"
8: "BranchCode"
9: "Employees"
10: 3
11: 3
12: "الاسم"
13: "EmployeeName"
14: "Employees"
length: 15
__proto__: Array(0)

​