ngFor Angular6的表行跨度

Question

This is a working snippet

I want the table to be like this:

 <table class="table table-bordered "> <thead> <tr id="first"> <th id="table-header"> <font color="white">No.</font> </th> <th id="table-header"> <font color="white">Responsible team </font> </th> <th id="table-header"> <font color="white">Task name</font> </th> <th id="table-header"> <font color="white">Task description </font> </th> </tr> </thead> <tbody> <!-- 1 --> <tr id="second"> <td rowspan="3" id="rowspan">1</td> <td rowspan="3" id="rowspan">Team1</td> <td>Description1</td> <td id="text">Application1</td> </tr> <tr id="second"> <td>Description2</td> <td id="text">Application2</td> </tr> <tr id="second"> <td>Description3</td> <td id="text">Application3</td> </tr> <tr> <tr id="third"> <td rowspan="3" id="rowspan">2</td> <td rowspan="3" id="rowspan">Team2</td> <td>Description1</td> <td id="text">Application1</td> </tr> <tr id="third"> <td>Description2</td> <td id="text">Application2</td> </tr> <tr id="third"> <td>Description3</td> <td id="text">Application3</td> </tr> <tr> </tbody> </table> 

But I don't want to hardcode it, I want to use *ngFor

This is how I've tried:

<table class="table table-bordered ">
    <thead>
        <tr id="first">
            <th id="table-header">
                <font color="white">No.</font>
            </th>
            <th id="table-header">
                <font color="white">Responsible team </font>
            </th>
            <th id="table-header">
                <font color="white">Task name</font>
            </th>
            <th id="table-header">
                <font color="white">Task description </font>
            </th>
        </tr>
    </thead>
    <tbody>
        <ng-container *ngFor="let i of finalL ; let index = index">
            <tr id="second">
                <td id="rowspan">{{index + 1 }}</td>
                <ng-container *ngFor="let j of i">
                    <td id="rowspan">{{j}}</td>
                </ng-container>
            </tr>
        </ng-container>
    </tbody>
</table>

But it is not working properly (you can see the difference on stackblitz link). How can I modify the code in order to obtain what I want? Thank you!

Answer 1

I can achieve this by treating the data like this:

In component class :

finalL = [
  ["Team1", "Description1", "Application1"],
  ["Team1", "Description2", "Application2"],
  ["Team1", "Description3", "Application3"],
  ["Team2", "Description1", "Application1"],
  ["Team2", "Description2", "Application2"],
  ["Team2", "Description3", "Application3"],
];

data() {
  // First find distinct teams and then filter information about him
  return this.finalL.map(x => x[0])
    .filter((v, i, a) => a.indexOf(v) === i)
    .map(x => ({ 
      name: x, 
      data: this.finalL.filter(y => y[0] === x)
    }));
}

and then on component template :

<table class="table table-bordered ">
  <thead>
    <tr id="first">
      <th id="table-header">
        <font color="white">No.</font>
      </th>
      <th id="table-header">
        <font color="white">Responsible team </font>
      </th>
      <th id="table-header">
        <font color="white">Task name</font>
      </th>
      <th id="table-header">
        <font color="white">Task description </font>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let i of data(); let index = index">
      <td>{{ index + 1 }}</td>
      <td>{{ i.name }}</td>
      <td>
        <tr *ngFor="let j of i.data">
          <td>{{ j[1] }}</td>
          <td>{{ j[2] }}</td>
        </tr>
      </td>
    </tr>
  </tbody>
</table>

Print of the result table