使用 ngFor Angular6 的表行跨度答案

【问题标题】：Table rowspan with ngFor Angular6使用 ngFor Angular6 的表行跨度
【发布时间】：2018-12-14 02:01:30
【问题描述】：

我希望桌子是这样的：

<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 链接上看到区别）。如何修改代码以获得我想要的？谢谢！

【问题讨论】：

您应该在到达显示部分之前更改您的算法以按团队对数据进行分组。
如果您的数据以可观察对象或使用数据源的形式返回，那么您可以使用 .pipe(reduce()) 方法将其返回

标签： javascript html angular angular6

【解决方案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

【讨论】：