如何在没有相同客户 ID Angular 的情况下显示 CDK 表答案

【问题标题】：How to display the CDK table without the same customer ID Angular如何在没有相同客户 ID Angular 的情况下显示 CDK 表
【发布时间】：2018-10-16 14:38:08
【问题描述】：

我有一个 cdk 表来显示数据，但是我有一些重复的数据，并且像这样的数据源

[
{customerID:"56789", name: "foo", mobile: "123456"},
{customerID:"56789", name: "foo", mobile: "123456"},
{customerID:"12345", name: "foo", mobile: "123456"},
{customerID:"12345", name: "foo", mobile: "123456"},
{customerID:"45678", name: "foo", mobile: "123456"}
]

现在我想隐藏具有相同 customerID 的列。所以不是在列表中显示 5 条记录，而是只显示 3 条记录。有什么条件我可以申请 mdTable 或 md-cell 来实现吗？感谢您的帮助。

【问题讨论】：

您可以在向表提供数据源之前过滤数据。
提示。

标签： angular

【解决方案1】：

您可以制作一个管道来过滤数据，例如：

@Pipe({
    name: 'filterId',
    pure: false
})
export class FilterValue implements PipeTransform {
transform(items: any[]): any {
  const uniqueArr = [];
  const ids = items.map((value) => value.customerID);
  items.map((value, index) => {
    if(ids.indexOf(value.customerID) !== index) {
      // duplicate value, delete or do whatever you want to
      delete value.customerID
      uniqueArr.push(value)
    } else {
      uniqueArr.push(value)
    }
  })
  return uniqueArr;
}

}

在你看来：

<div *ngFor="let item of ArrayVariable | filterId">
<div *ngIf="item.customerID">

【讨论】：