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

Question

我正在尝试从给定的 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": "c@gmail.com"
                            },
                            {
                                "me_value": ",d@gmail.com"
                            }
                        ],
                        "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": "t@gmail.com"
                            },
                            {
                                "me_value": ",u@gmail.com"
                            }
                        ],
                        "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>

非常感谢您的帮助...在此先感谢

Answer 1

我会准备适当的表格行结构来呈现这个复杂的表格。

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-run Example