I have 3 different arrays:

dates: ['2022-01-01', '2022-02-01']

uniqueNames: ['a', 'b']

finalTableData: 

[

   [

    {name: 'a', amount: 200}, {name: 'a', amount: 100}

  ], 

  [

    {name: 'b', amount: 200}, {name: 'b', amount: 100}

  ]

]

I want to display a table with headers in columns and rows with *ngFor like this:

<table>
      <tr>
        <th></th>
        <th scope="col">2022-01-01</th>
        <th scope="col">2022-02-01</th>
      </tr>
      <tr>
        <th scope="row">a</th>
        <td>200</td>
        <td>100</td>
      </tr>
      <tr>
        <th scope="row">b</th>
        <td>200</td>
        <td>100</td>
      </tr>
    </table>

Expected table

My Approach:

  <table>
        <thead>
            <tr>
                <th ></th>
                <ng-container *ngFor="let dat of dates;">
                    <th >{{dat}}</th>
                </ng-container>
            </tr>
        </thead>
        <tr>
        <tr *ngFor="let row of uniqueNames;">
            <th>{{row}}</th>
            <table>
                <tr *ngFor="let data of finalTableData; let i = index">
                    <td *ngFor="let item of data">{{item.amount}}
                    </td>
                </tr>
            </table>
        </tr>
    </table>

The problem here is that I cant add the data of finalTableData in each row, it adds all the array of arrays in each row like this: MyTable

CodePudding user response：

html file

{{ date }} {{ row }}

<ng-container *ngFor="let data of finalTableData; let i = index">
  <td *ngFor="let item of data">{{ item.amount }}</td>
</ng-container>

ts file

dates = ['2022-01-01', '2022-02-01'];

uniqueNames = ['a', 'b'];

finalTableData: any = [ [ { name: 'a', amount: 200 }, { name: 'b', amount: 100 }, ], ];

CodePudding user response：

I finally found an answer.

As my array of arrays have an object with the name, i stopped using the uniqueDates value.

Here is the final code.

<table >
                <thead>
                    <tr>
                        <th ></th>
                        <ng-container *ngFor="let dates of periodicidadesMonthly;">
                            <th >{{dates}}</th>
                        </ng-container>
                    </tr>
                </thead>
                <tr *ngFor="let data of finalTableDataMonthly; let i = index">
                    <td style="text-align: initial;" ><b>{{data[0].name}}</b></td>
                    <td *ngFor="let item of data">{{ item.amount | currency }}</td>
                </tr>
            </table>

CodePudding user response：

Modified your finalData array result in such manner that gives a output something like this.

 finalTableData = [
    {
      name: 'a',
      data: [
        { name: 'a', amount: 200 },
        { name: 'a', amount: 100 },
      ],
    },
    {
      name: 'b',
      data: [
        { name: 'b', amount: 200 },
        { name: 'b', amount: 100 },
      ],
    },
  ];

and Here is the Html

<table border="">
  <tr>
    <th></th>
    <th scope="col" *ngFor="let date  of dates">{{date}}</th>
  </tr>
  <tr *ngFor="let uniqeName of finalTableData">
    <th scope="row">{{uniqeName.name}}</th>
    <td *ngFor="let data of uniqeName.data">{{data.amount}}</td>
  </tr>
</table>