删除列中的重复名称 [英] Remove duplicate names in a column

问题描述

在我的 angular 6 应用程序中，我正在制作一个包含 products 数组内容的表格，例如

In my angular 6 application, i am making a table with the contents from products array like,

Ts:

  products: any = {
    "productOne": [
      {
        "id": 1, "product_name": "Product One",
        "productOneProperties": [
          { "id": 1, "property_name": "Length", "property_value": "12cm" },
          { "id": 2, "property_name": "Width", "property_value": "10cm" },
          { "id": 3, "property_name": "Height", "property_value": "20cm" },
        ]
      }
    ],

    "productTwo": [
      {
        "id": 2, "product_name": "Product Two",
        "productTwoProperties": [
          { "id": 1, "property_name": "Length", "property_value": "15cm" },
          { "id": 2, "property_name": "Width", "property_value": "12cm" },
          { "id": 2, "property_name": "Size", "property_value": "Medium" }
        ]
      }
    ]
  }

HTML:

<table>
    <thead>
        <tr>
            <th>
                Property Details &nbsp; &nbsp; &nbsp; &nbsp;
            </th>
            <th>
                {{productOneDetails}}  &nbsp; &nbsp; &nbsp; &nbsp;
            </th>
            <th>
                {{productTwoDetails}} 
            </th>
        </tr> <br>
    </thead>
    <tbody>
        <tr *ngFor="let item of mergedArray">
      <td> {{ item.property_name }} </td>
      <td> {{ item.type === "one" ? item.property_value: '-' }} </td>
      <td> {{ item.type === "two" ? item.property_value: '-'  }} </td>
        </tr>
    </tbody>
</table>

这里我有两个单独的产品和属性，其中 Length 和 Width 等属性名称对于带有 的两个产品都重复>不同的值...

Here i have two separate products and properties in which the property name such as Length and Width has repeated for both products with different values..

工作 stackblitz: https://stackblitz.com/edit/angular-9yzwss

当前结果:

Property Details            Product One         Product Two

Length                      12cm                -
Width                       10cm                -
Height                      20cm                -
Length                      -                   15cm
Width                       -                   12cm
Size                        -                   Medium

预期结果:

Property Details            Product One         Product Two

Length                      12cm                15cm
Width                       10cm                12cm
Height                      20cm                -
Size                        -                   Medium

请帮助我通过将重复的属性名称显示为唯一并显示相邻的值来实现预期结果.如果属性和值不存在，则需要具有-"..

Kindly help me to achieve the expected result by displaying the duplicate property name as unique and display the values adjacent.. If the property and value is not there then it needs to have "-"..

请帮助我将当前结果转换为预期结果..

推荐答案

首先你的结构添加错了，你必须考虑你的结构使用 flattern，如果你这样做会容易得多.

First of all your structure is quite wrongly added, you must consider your structure using flattern, It would be quite easier if you do so.

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

Let's think about handling this structure.

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

You need three variables defined in your component

  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);
    });

然后将此变量分配给标题、数据和属性

Then assign this variables to the header,data and 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;

所以，您现在拥有三样东西，标题数据和唯一的属性，

So, you have three things now, headers data and properties which are unique,

现在，您需要一种方法来根据数据过滤掉此属性名称，

Now, you need one method which will filter out this property names against the data,

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

现在，在您的视图中，您可以将表格重组为这样

Now, in your view you can restructure your table to like this

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

因此，这将根据产品过滤掉属性数据.

So, this will filter out the properties data against the products.

这是stackblitz 演示.请记住，使用该结构有一些缺点.就像您的第三个属性必须是 productThreeProperties

Here is the stackblitz demo. remember there are some drawbacks using the structure. like your third property must be a name of productThreeProperties

这篇关于删除列中的重复名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！