在角度 6 中垂直合并单元格

Question

我正在尝试合并角度表中的单元格，但我的对象是动态的，所以我无法修复 rowspan 属性的某些值...

这是我的实际 html：

 <table class="simple">
                <thead>
                <tr>
                    <th *ngFor="let col of columns"><p class="column-header">{{col}}</p></th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of mylist; let i=index" class="p-16 pl-24">
                    <td>{{item.name}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.number}}</td>
                    <td>{{item.cod}}</td>
                    <td>{{item.pref}}</td>
                </tr>
                </tbody>
            </table>

实际结果：

name        |    email      | number        | cod   | pref
-------------------------------------------------------------
maryann     |  m@gmail.com  | 123           | 1     | 22
maryann     |  m1@gmail.com | 2104          | 12    | 22
john        |  j@gmail.com  | 2206          | 11    | 4
john        |  j1@gmail.com | 2205          | 178   | 4
john        |  j2@gmail.com | 2309          | 199   | 4
petter      |  p@gmail.com  | 12            | 150   | 50

预期结果：

name        |    email      | number        | cod   | pref
-------------------------------------------------------------
maryann     |  m@gmail.com  | 123           | 1 | 22
            |  m1@gmail.com | 2104          | 12    | 
------------------------------------------------------------
john        |  j@gmail.com  | 2206          | 11    | 4
            |  j@gmail.com  | 2205          | 178   | 
            |  j@gmail.com  | 2309          | 199   | 
------------------------------------------------------------
petter      |  p@gmail.com  | 12            | 150   | 50

Answer 1

你可以建立一个管道：

export interface GroupedData {
  name: string;
  pref: number;
  emails: string[]; 
  numbers: (number | string)[]; 
  cods: (number | string)[];
}

@Pipe({name: 'groupByEmail'})
export class GroupByEmailPipe implements PipeTransform {
  transform(array: any[]): GroupedData[] {
    const dataByUser: {[key:string]: GroupedData} = {};
    for(const item of array) {
      if(!dataByUser.hasOwnProperty(item.name)) {
        dataByUser[item.name] = {
          name: item.name,
          pref: item.pref,
          emails: [],
          numbers: [],
          cods: [],
        };
      }

      dataByUser[item.name].emails.push(item.email ? item.email : '');

      // for simplicity, I'm considering that none of the following values can be zero
      dataByUser[item.name].numbers.push(item.number ? item.number : '');
      dataByUser[item.name].cods.push(item.cod ? item.cod : '');
    }

    return Object.keys(dataByUser).map(key => dataByUser[key]);
  }
}

在你的模板中：

<table class="simple">
  <thead>
    <tr>
      <th *ngFor="let col of columns"><p class="column-header">{{col}}</p></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of mylist | groupByEmail" class="p-16 pl-24">
      <td>{{item.name}}</td>
      <td><div *ngFor="let value of item?.emails">{{value}}</div></td>
      <td><div *ngFor="let value of item?.numbers">{{value}}</div></td>
      <td><div *ngFor="let value of item?.cods">{{value}}</div></td>
      <td>{{item.pref}}</td>
    </tr>
  </tbody>
</table>

不要忘记在@NgModule 的declarations 数组中声明管道。