Question

我正在尝试合并角度表中的单元格，但是我的对象是动态的，因此我无法为rowpan属性设置某些值...

这是我的实际html：

Error in file.exists(diagram) : invalid 'file' argument   
Error: `export_graph()` REASON:* The graph object is not valid

实际结果：

 <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

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的{{1}}数组中声明管道。

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

1 个答案: