如何使用角度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_list": [
                    {
                        "me_type": "Email ID",
                        "me_email_list": [
                            {
                                "me_value": "[email protected]"
                            },
                            {
                                "me_value": ",[email protected]"
                            }
                        ],
                        "me_percent": "100"
                    }
                ]
            }
            
        ]
    },
     {
        "me_value": "value2",
        "matching_attributes": [
            {
                "me_id": "1234",
                "me_name": "rimzim",
                "me_list": [
                    {
                        "me_type": "Email ID",
                        "me_email_list": [
                            {
                                "me_value": "p@gmail"
                            },
                            {
                                "me_value": "q@gmail"
                            }
                        ],
                        "me_percent": "100"
                    }
                ]
            },
            {
                "me_id": "5678",
                "me_name": "ranu",
                "me_list": [
                    {
                        "me_type": "Email ID",
                        "me_email_list": [
                            {
                                "me_value": "[email protected]"
                            },
                            {
                                "me_value": ",[email protected]"
                            }
                        ],
                        "me_percent": "100"
                    }
                ]
            }
            
        ]
    },
    
    
]}

在此处输入图片说明

上面的结构是实际的输出。我尝试创建相同的输出,但对我来说,数据是单行输入的。

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>

对此的帮助非常重要...在此先感谢

yurzui

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

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(', '),
          rowspan: 1
        },
        {
          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运行示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章