如何使用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>

同樣的幫助是高度appriciated ...提前致謝

Answer 1

我會准備適當的表格行結構以呈現這個復雜的表格。

組件.ts（或服務.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;
}

模板.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>

吳運行示例