Таблица через 2 *ngFor цикла Angular

У меня есть таблица, которую я пытаюсь сделать через 2 *ngFor циклы, но я делаю это неправильно. Я не понимаю, как добавить стили и картинки Что мне нужно изменить и как, пожалуйста, скажите мне

HTML

<table class="products__table">
        <tr class="products__name products__row">
          <th *ngFor="let column of tableHeaders" class="products__column">{{ column.title }}</th>
          <th></th>
        </tr>
        <tr *ngFor="let row of tableRows" class="products__row">
          <td *ngFor="let column of tableHeaders" class="products__column">{{ row[column.name] }}
            <div *ngIf="row.productChange < 0; else goodRate" class="prices__price">
              <span class="price red-price">${{ row.productChange }}</span>
              <img src="../../../assets/img/arrow-down.svg" alt="arrow">
            </div>
            <ng-template #goodRate>
              <div class="prices__price">
                <span class="price green-price">${{ row.productChange }}</span>
                <img src="../../../assets/img/arrow-up.svg" alt="arrow">
              </div>
            </ng-template>
          </td>
          <td class="products__column">
            <button type="submit" class="products__btn">Buy</button>
          </td>
        </tr>
      </table>

product-table.ts

export const TABLE_ROWS: ITableRow[] = [
  {
    productName: 'Gold',
    productPrice: '$1,789.81',
    productChange: -8.89,
    arrowImg: 'assets/img/arrow-down.svg',
    productDiagram: 'assets/img/products-diagram-downn.svg',
  },
...
export const TABLE_HEADERS = [
  {
    title: 'Product',
    name: 'productName',
  },
...

Резуьтат который у меня получается

Такой результат мне надо получить