Свяжите тело таблицы с n количеством столбцов в Angular 8

Question

Я получаю данные из API с неизвестным именем столбца. Я могу связать заголовки таблицы, но не могу связать столбец строки tbody. Данные будут такими, например,

  [{name: "jean", surname: "kruger"}, {name: "bobby", surname: "marais"}];
OR
  [{name: "jean", email: "a@a.com"}, {name: "bobby", email: "b@b.com"}]; // anything

<table>
   <thead>
      <tr><th *ngFor="let col of headers">{{col}}></th></tr>
   </thead>
   <tbody>
      <tr *ngFor="let obj of data">
         <td *ngFor="let col of headers"> {{obj[col]}} </td> // Its not working
                               OR
          <td *ngFor="let col of headers"> {{obj.col}} </td> // Its not working, will be column sequence mapping issue
      </tr>
   </tbody>
</table>

** Как решить эту проблему? Спасибо .. **

Answer 1

Пожалуйста, проверьте приведенный ниже образец кода, который я создал. Думаю, я решил вашу проблему там.

https://stackblitz.com/edit/angular-ivy-dbx49v