javascript - 表 rowspan 与 ngFor Angular 6

Question

This is a working snippet

我希望表格是这样的:

<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>

但我不想硬编码它，我想使用 *ngFor

这是我尝试过的方法:

<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>

但它无法正常工作(您可以在 stackblitz 链接上看到差异)。如何修改代码以获得我想要的？谢谢!

Answer 1

我可以通过这样处理数据来实现这一点:

在组件类中:

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)
    }));
}

然后在组件模板上:

<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