html - Poblar tabla con un arreglo dentro de otro arreglo *ngFor

Necesito una tabla popular para comparar dos productos. El modelo de mi json contiene un arreglo dentro de otro. De esta manera.

products: [
  {
    nome: 'Product Basic',
    preco: 9.90,
    categoria: 1,
    caracteristicas: [
      '1 basic',
      '2 basic',
      '3 basic',
      '4 basic',
      '5 basic',
      '6 basic]
  },
  {
    nome: 'Product Plus',
    preco: 14.90,
    categoria: 1,
    caracteristicas: [
      '1 Plus',
      '2 Plus',
      '3 Plus',
      '4 Plus',
      '5 Plus',
      '6 Plus']
  }
]

Estoy creando la mesa de esta manera

   <tr *ngFor="let columnCaracteristica of tableComparative.columns">
        <td>{{columnCaracteristica}}</td>
        <ng-container *ngFor="let produto of tableComparative.produtos">
            <td *ngFor="let caracteristica of produto.caracteristicas">{{caracteristica}}</td>
        </ng-container>
    </tr>

Característica a comparar

columns: ['Agencia', 'Encandor', 'Roubo', 'Vale presente', 'Raios', 'Fogo'],

Resultado

esperada

Respuesta #1

Puedes hacerlo siguiendo la siguiente plantilla

<table *ngIf="products?.length">
  <tr *ngFor="let characteristic of products[0].caracteristicas; let i = index">
    <td>
      {{ columns[i]}}
    </td>
    <td *ngFor="let product of products">
      {{ product.caracteristicas[i] }}
    </td>
  </tr>
</table>

Ejemplo de Ng-run

Además, también puedes agregar un encabezado superior para mostrar los nombres de los productos si lo deseas

<thead>
  <tr>
    <th></th>
    <th *ngFor="let product of products">
      {{ product.name }}
    </th>
  </tr>
</thead>

Ejemplo de Ng-run