2

尝试创建一个通用表，它将接受 TS 文件中的列并加载数据。

收到此错误：

ng:///AppModule/TableBasicExample.ngfactory.js:56 ERROR 错误：找不到 ID 为“[object Object]”的列。

代码：

/*
* @title Basic use of <table mat-table>
 */
@Component({    
  selector: 'table-basic-example',    
  styleUrls: ['table-basic-example.css'],    
  templateUrl: 'table-basic-example.html',    
})
export class TableBasicExample implements OnInit {     
  displayedColumns: Column[] = [    
    {headername:"name", field:"name"}    
  ];
  dataSource : MatTableDataSource<PeriodicElement> = new MatTableDataSource();    

  ngOnInit() {    
    this.dataSource = new MatTableDataSource(ELEMENT_DATA);    
    console.log(this.dataSource.data);        
    console.log(this.displayedColumns,"columns");      
  }
}

<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">        

  <!--- Note that these columns can be defined in any order.    
        The actual rendered columns are set as a property on the row  
  definition" -->   

  <!-- Position Column -->

  <ng-container *ngFor= "let column of displayedColumns"  
  [matColumnDef]="column.headername">   
    <th mat-header-cell *matHeaderCellDef>{{column.headername}}</th>    
    <td mat-cell *matCellDef="let element"> {{element}} </td>               
  </ng-container>    
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>    
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr></table>
4

3 回答 3

3

我遇到了同样的错误并通过添加一个仅包含列属性的字符串数组来解决它：

public columnsProps: string[] = this.displayedColumns.map((column: Column) => column.field);

然后你必须使用这个新数组而不是“mat-h​​eader-row”和“mat-row”标签中的显示列数组：

<tr mat-header-row *matHeaderRowDef="columnsProps"></tr>
<tr mat-row *matRowDef="let elemento; columns: columnsProps"></tr>

我猜错误是说 mat-row 正在搜索“matColumnDef”等于提供的每个列的行，但它正在接收一个对象而不是属性本身，如果它是一个对象，它不知道是什么使用的属性。

于 2019-08-01T02:33:36.953 回答
1

我通过仔细阅读文档找到了解决方案:)

在 ts 中：

public DisplayColumns: string[] = this.Columns.map((column: IBaseColumn) => column.field);

我的观点：

   <mat-table *ngIf="DataSource && DisplayColumns" #table [dataSource]="DataSource">
      <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.field">
        <th mat-header-cell *cdkHeaderCellDef>{{ column }}</th>
        <td mat-cell *cdkCellDef="let row">{{ row[column.field] }}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="DisplayColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: DisplayColumns"></tr>
    </mat-table>

您必须将列名发送到表和 matHeaderRowDef 并在 ngFor 中使用您的普通列

于 2019-12-19T22:15:18.510 回答
0

我的解决方案是创建一个新数组并传递给“*matHeaderRowDef”和“*matRowDef”。例如，我有一个像这样的表格组件：

<app-table
  [dataSource]="dataSource"
  [displayedColumns]="[
    { title: 'Reference', value: 'id' },
    { title: 'Date created', value: 'createdDate' },
    { title: 'Status', value: 'status' },
    { title: 'Amount', value: 'amount' }
  ]"
></app-table>

如您所见，我正在向我的表发送“displayedColumns”。现在在组件上， table.component.ts您需要创建一个仅包含“displayedColumns”中的字符串的新变量：

public columnNames: any[] = [];
ngOnInit(): void {
  // init custom table columns
  for (const column of this.displayedColumns) {
    this.columnNames.push(column.title);
  }
}

模板table.component.html应如下所示：

<table mat-table [dataSource]="tableDataSource">
  <ng-container *ngFor="let column of displayedColumns" matColumnDef=" 
   {{column.title}}">
  <th mat-header-cell *matHeaderCellDef id="col.title">
    {{ column.title }}
  </th>
  <td mat-cell *matCellDef="let element">
    {{ element[column.value] }}
  </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnNames"></tr>
<tr  mat-row *matRowDef="let row; columns: columnNames"></tr>
于 2021-12-16T11:12:38.670 回答