首页 > 解决方案 > Angular pipe - Angular Mat-Table - 如何修改管道以正确呈现数据?

问题描述

如何重写管道以便在 mat-table 中填充数据?基本上,我正在尝试理解和开发可重用的自定义表。为此,我有类似的数据结构,

[
    {
        name: 'xxxxx',
        description: 'xxxxx',
        obj: {
            custId: 'xxxxx-01',
            custName: 'xxxxx-dala',
            adminName: 'xxxxx',
            country: 'USA',
            region: 'Texas',                
        }
    }
]

这是我当前的界面

export interface Table{
    name: string;
    description: string
    obj: Obj [];

}

export interface Obj{
    custName: string;
    custId: string;
    country: string;
    region: string;
 }
 
 
 @Pipe({
  name: 'cleanData'
})
export class DataProps implements PipeTransform {

  transform(object: any, keyName: string, ...args: unknown[]): unknown {
    return object[keyName];
  }

}


 <td mat-cell *matCellDef="let element" >
    {{element | cleanData: tableColumn.dataKey}}
</td>
    

问题:我的表格填充如下在此处输入图像描述

标签: angulartypescriptangular-material

解决方案


推荐阅读