Javascript 如何在angular 6中处理复杂的行跨度？

我已经从下面提到的JSON创建了一个表，它工作得很好。我有一些情况需要处理。这里也提到了我使用的功能。我还附上了同样的输出图像。非常感谢您的帮助。。。提前谢谢 条件：

• 如果电子邮件行为空，则需要删除该特定行
• 假设value2在电子邮件中有一个值，在这种情况下应该显示它

---

似乎您希望进行列（attr）级验证，因此在html中循环时，您需要实现检查

接触
泰
预计起飞时间
邮件
百分比
{{行[0]。文本}
{{行[1]。文本}
{{行[2]。文本}
{{行[3]。文本}
{{行[4]。文本}

你能做一个stackbliz。。。调试比较容易。您是否考虑过在您的条件中使用*ngIf？Smith-我的html类似于{{col.text}}@maxkart-非常感谢您花费一些时间调试这个问题，但我仍然有这个问题。请检查此stackBlitz显示了添加验证的方法。。检查*ngIf语句

    

        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;
    }
    
    ```
    #Josn : #
    ```
    
{
   "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"
                  }
               ]
            }
         ]
      }
   ]
}

<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">
      <!-- check if row is empty or could add additional check such 
      row[3].text (email) is true 
       -->
      <ng-container *ngIf='row && row.length > 0'> 
      <td [attr.rowspan]='row[0].rowspan'>{{row[0].text}}</td>
      <td *ngIf='row.length > 1' [attr.rowspan]='row[1].rowspan'>{{row[1].text}}</td>
      
      <td *ngIf='row.length > 2' [attr.rowspan]='row[2].rowspan'>{{row[2].text}}</td>
      <td *ngIf='row.length > 3' [attr.rowspan]='row[3].rowspan'>{{row[3].text}}</td>
      <td *ngIf='row.length > 4' [attr.rowspan]='row[4].rowspan'>{{row[4].text}}</td>
      </ng-container>
        </tr>

    </tbody>
</table>