删除列中的重复名称 [英] Remove duplicate names in a column
问题描述
在我的angular 6应用程序中，我正在用products数组中的内容制作一张表，
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
</th>
<th>
{{productOneDetails}}
</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之类的属性名称已重复 ./p>
工作中的堆栈闪电:: 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
请通过将重复的属性名称显示为唯一并显示相邻的值来帮助我达到预期的结果.如果属性和值不存在，则它需要具有-" .
请帮助我将当前结果转换为预期结果.
首先，错误地添加了您的结构，必须考虑使用Flattern，如果这样做，会容易得多.
让我们考虑处理这种结构.
您需要在组件中定义三个变量
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演示.请记住，使用该结构存在一些弊端.例如您的第三个属性必须是productThreeProperties
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
</th>
<th>
{{productOneDetails}}
</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>
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..
Working stackblitz: https://stackblitz.com/edit/angular-9yzwss
Current result:
Property Details Product One Product Two
Length 12cm -
Width 10cm -
Height 20cm -
Length - 15cm
Width - 12cm
Size - Medium
Expected Result:
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 "-"..
KIndly helpme to convert the current result into expected result..
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;
First you need to get the headers
var headers = Object.keys(this.products).reduce((prev, next) => {
prev.push({ name: this.products[next][0].product_name, id: next });
return prev;
}, []);
Then, get properties and data
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.
Here is the stackblitz demo. remember there are some drawbacks using the structure. like your third property must be a name of productThreeProperties
这篇关于删除列中的重复名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
