Данные не отображаются на дисплее component.html хотя он отображается на переменной this.reflistval

---

Я работаю над проектом angular 7 с asp.net ядро веб-API 2.1
отображение данных в переменных событий reference.component.ts ngoninit

this.RefListVal

но не показываться на публике Reference.component.html
моя функция веб-API

[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;

       }

результат выглядит следующим образом

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

Как отобразить результат на экране reference.component.html угловой 7

Что я уже пробовал:

на сервисе api

referencelist:Reference[];

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

по ссылке.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);

    });

на 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)

​

---

<td> {{ref}} </td>  

command.CommandText = $"... WHERE TableName =  N'{tablename}'  and TABLE_NAME= N'{tablename}'";