如何使用角度6从json创建复杂表？

问题描述

我正在尝试从给定的json创建表。这是json结构。我正在使用简单的html表来使表结构与下面的快照中提到的相同。由于数据的动态表结构在我的情况下无法正常显示。

{
"e_id": "1234","e_o_name": "Contact_info","matching_details": [
    {
        "me_value": "value1","matching_attributes": [
            {
                "me_id": "1234","me_name": "28 sai","me_list": [
                    {
                        "me_type": "Email ID","me_email_list": [
                            {
                                "me_value": "a@gmail"
                            },{
                                "me_value": "b@gmail"
                            }
                        ],"me_percent": "100"
                    }
                ]
            },{
                "me_id": "5678","me_name": "29 meena","me_email_list": [
                            {
                                "me_value": "[e-mail]"
                            },{
                                "me_value": ",[e-mail]"
                            }
                        ],"me_percent": "100"
                    }
                ]
            }
            
        ]
    },{
        "me_value": "value2","me_name": "rimzim","me_email_list": [
                            {
                                "me_value": "p@gmail"
                            },{
                                "me_value": "q@gmail"
                            }
                        ],"me_name": "ranu","me_email_list": [
                            {
                                "me_value": "[e-mail]"
                            },[e-mail]"
                            }
                        ],]}

上面的结构是实际的输出，我尝试创建相同的输出，但是对于 我的数据正在单行显示。

enter code here<table>
<tbody>
    <tr>
        <th>contact</th>
        <th>ty</th>
        <th>ed</th>
        <th>mail</th>
        <th>percent</th>
    </tr>
    <tr>
        <td rowspan="4">data.e_o_name</td>
        <td rowspan="2" *ngFor="let match of data.matching_details">{{match.me_value}}</td>
        <td>28 sai</td>
        <th>a@gmail,b@gmail</th>
        <td>100</td>
    </tr>
    
</tbody>

同样需要帮助，在此先感谢

解决方法

我将准备适当的表行结构以呈现此复杂表。

component.ts（或service.ts）

rows = [];

generateTable() {
  if (!this.data) {
    return;
  }

  this.rows.push([
    {
      text: this.data.e_o_name,rowspan: 0
    }
  ]);
  let maxRowSpan = 0;

  this.data.matching_details.forEach((detail,i) => {
    const elemRowSpan = Math.max(detail.matching_attributes.length,1);
    maxRowSpan += elemRowSpan;

    if (i > 0) {
      this.rows.push([])
    }
    this.rows[this.rows.length - 1].push({
      text: detail.me_value,rowspan: elemRowSpan
    });

    detail.matching_attributes.forEach((attr,j) => {
      if (j > 0) {
        this.rows.push([])
      }

      const mail = attr.me_list[0];
      this.rows[this.rows.length - 1].push(
        {
          text: attr.me_name,rowspan: 1
        },{
          text: mail.me_email_list.map(({ me_value }) => me_value).join(','),{
          text: mail.me_percent,rowspan: 1
        }
      );
    })
  });
  this.rows[0][0].rowspan = maxRowSpan;
}

template.html

<table>
  <tbody>
    <tr>
      <th>contact</th>
      <th>ty</th>
      <th>ed</th>
      <th>mail</th>
      <th>percent</th>
    </tr>
    <tr *ngFor="let row of rows">
      <td *ngFor="let col of row" [attr.rowSpan]="col.rowspan">{{ col.text }}</td>
    </tr>
  </tbody>
</table>

Ng-run Example