删除列中的重复名称

首先,你的结构被错误地添加了,你必须考虑使用更平的结构,如果你这样做会更容易。

让我们考虑处理这个结构。

您需要在组件中定义三个变量

  headers: any;
  data: any;  
  properties:any;

首先你需要得到邮件头

 var headers = Object.keys(this.products).reduce((prev, next) => {
      prev.push({ name: this.products[next][0].product_name, id: next });
      return prev;
    }, []);

然后,获取属性和数据

 let data = [];
    let propertiesData = [];
    headers.forEach(a => {
      const properties = this.products[a.id][0][a.id + "Properties"];
      data.push({id:a,properties:properties});
      propertiesData.push(properties);
    });

然后将这个变量赋给头、数据和属性

propertiesData = propertiesData.flat().filter((thing, index, self) =>
      index === self.findIndex((t) => (
        t.property_name === thing.property_name
      ))
    )

    this.headers = headers;
    this.data = data;
    this.properties = propertiesData;

所以,现在有三件事,头数据和属性是唯一的,

现在,您需要一个方法根据数据筛选出这个属性名,

 getPropertyData(propertyName,item){        
    var value= item.properties.filter(a=> a.property_name === propertyName);
    if(value.length>0){
      return value[0].property_value;
    }else{
      return "-";
    }
  }

现在,在您的视图中,您可以这样重新构造表

<table>
    <thead>
        <tr>
            <th>
                Property Details
            </th>
            <th *ngFor="let item of headers">
                {{item.name}}
            </th>
        </tr> <br>
    </thead>
    <tbody>
        <tr *ngFor="let item of properties">
      <td>{{item.property_name}}</td>
      <td *ngFor="let itemData of data">
        {{getPropertyData(item.property_name,itemData)}}
            </td>
        </tr>
    </tbody>
</table>

因此,这将根据产品过滤掉属性数据。

这里是 stackblitz demo . 记住,使用这个结构有一些缺点。就像你的第三个财产必须是 productThreeProperties

Something like this

也许有一种更好的格式化数据的方法,但其思想应该大致相同。 或者,您可以尝试将对象格式化为以下格式:

[ 
{ "propName": "length", "one": 12, "two": 20 },
{ "propName": "width", "one": 12, "two": '-'}
...
]

或者将“一”和“二”组合成一个数组,以便于扩展。

结果不正确,因为合并产品逻辑是错误的。我做了一些小的更改,以显示如何更正数据以显示您想要的内容。

ngOnInit() {
  this.mergedProductProperties = {};
  this.products.productOne.forEach(element => {
    this.productOneDetails = element.product_name;
    element.productOneProperties.type  = "one";

    element.productOneProperties.forEach(item => {
      this.mergedProductProperties[item.property_name] =this.mergedProductProperties[item.property_name] || [];
      this.mergedProductProperties[item.property_name][0] = item.property_value;
     });
   });

  this.products.productTwo.forEach(element => {
    this.productTwoDetails = element.product_name;
     element.productTwoProperties.type  = "two";

     element.productTwoProperties.forEach(item => {
       this.mergedProductProperties[item.property_name] = this.mergedProductProperties[item.property_name] || [];
       this.mergedProductProperties[item.property_name][1] = item.property_value;
     });
   });
  console.log(this.mergedProductProperties);
  for(var key in this.mergedProductProperties){
     this.mergedArray.push({
       property_name: key,
       property_value: this.mergedProductProperties[key]
     })
  }
  console.log(this.mergedArray);
}

HTML将更改为

<tbody>
    <tr *ngFor="let item of mergedArray">
  <td> {{ item.property_name }} </td>
    <td *ngFor="let val of item.property_value">{{val}}</td>
    </tr>
</tbody>