Angular 显示无重复值的Mat表格

“我的材料表”中有三列，例如零件、类型和名称。 当我绑定这些列时，我从服务中得到的所有列的数据都是相同的，因为它在多行中显示重复的数据。现在我想把他们都挤在一起，只想在表中显示一行

  loadPartsUsageData(reqObj) {
this.partUsageService.getdata(reqObj)
  .subscribe(
    success => {
      this.loaddataSource(success);
      this.updata = success;
      console.log('data', this.updata);
    },
    error => {
      this.updata = {};
      this.partusageDataSource = [];
      this.totalRecords = 0;
    },
    () => {
    }
  );

}

loaddataSource（响应：任意）{
const dataWithIndex:any[]=[]；
for（设i=0；i

} 服务的响应

---

在您的组件中，您可以创建一个新数组，并将当前使用的数组中的任何项添加到此数组中，如果尚未添加这些项（基于匹配属性），例如，如果当前数组称为项：

this.items.forEach(i =>
 {
!this.itemsGroup.some(ig => 
ig.name == i.name && 
ig.part == i.part &&
ig.type == i.type) ? 
this.itemsGroup.push(i) : null;
 });

然后使用itemsGrouped数组填充表

或者，“for”循环通常被报告为更快，因此可以使用它，并将比较逻辑移动到函数中，例如组（项：项）：

for（变量i=0，len=this.items.length；i

修改您的代码示例以显示其工作原理：

loaddataSource(response: any) {
const dataWithIndex: any[] = [];
const groupedData: any[] = [];

for (let i = 0; i < Object.keys(response.partDetails).length; i++) {
  dataWithIndex.push({
    // id: i,
    partType: response.partDetails[i].partType === null ? '' : response.partDetails[i].partType,
    basepartNumber: response.partDetails[i].basepartNumber === null ? '' : response.partDetails[i].basepartNumber,
    partD1d: response.partDetails[i].partD1d === null ? '' : response.partDetails[i].partD1d,
    partDescription: response.partDetails[i].partDescription === null ? '' : response.partDetails[i].partDescription,
    partNumber: response.partDetails[i].partNumber === null ? '' : response.partDetails[i].partNumber
  });
}

dataWithIndex.forEach(i =>
 {
!groupedData.some(ig => 
ig.basepartNumber== i.basepartNumber && 
ig.partD1d== i.partD1d &&
ig.partNumber == i.partNumber) ? 
groupedData.push(i) : null;
 });

console.log('Valid data......', response, response.partDetails);
this.partusageDataSource = new MatTableDataSource(groupedData);
//etc

loaddataSource（响应：任意）{
const dataWithIndex:any[]=[]；
常量groupedData:any[]=[]；
for（设i=0；i
{
！groupedData.some（ig=>
ig.basepartNumber==i.basepartNumber&&
ig.partD1d==i.partD1d&&
ig.零件号==i.零件号）？
groupedData.push（i）：空；
});
console.log（'validdata…'，response，response.partDetails）；
this.partusageDataSource=新MatTableDataSource（groupedData）；
//等

您好，您能给我一个stackblitz示例吗？您能在问题中添加代码示例，让我了解它目前在后台的工作情况吗？您好，我添加了我的代码和响应，这是从服务中获得的。所以只需创建另一个数组any[]与dataWithIndex相同。然后就在您的console.log之前（'Valid data…line，添加循环，但将'this.items'替换为dataWithIndex，将this.itemsGroup替换为新的数组名。无需使用'this'。因为数组是在同一个函数中声明的。然后将新数组用作MatTableDataSourcefor（var i=0，len=this.items.length；ifor (var i = 0, len = this.items.length; i < len; i++) { this.group(this.items[i]); }

loaddataSource(response: any) {
const dataWithIndex: any[] = [];
const groupedData: any[] = [];

for (let i = 0; i < Object.keys(response.partDetails).length; i++) {
  dataWithIndex.push({
    // id: i,
    partType: response.partDetails[i].partType === null ? '' : response.partDetails[i].partType,
    basepartNumber: response.partDetails[i].basepartNumber === null ? '' : response.partDetails[i].basepartNumber,
    partD1d: response.partDetails[i].partD1d === null ? '' : response.partDetails[i].partD1d,
    partDescription: response.partDetails[i].partDescription === null ? '' : response.partDetails[i].partDescription,
    partNumber: response.partDetails[i].partNumber === null ? '' : response.partDetails[i].partNumber
  });
}

dataWithIndex.forEach(i =>
 {
!groupedData.some(ig => 
ig.basepartNumber== i.basepartNumber && 
ig.partD1d== i.partD1d &&
ig.partNumber == i.partNumber) ? 
groupedData.push(i) : null;
 });

console.log('Valid data......', response, response.partDetails);
this.partusageDataSource = new MatTableDataSource(groupedData);
//etc