Question

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

遇到此错误：

ng：///AppModule/TableBasicExample.ngfactory.js：56错误错误：找不到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>

Answer 1

我遇到了同样的错误，并通过添加仅包含列属性的字符串数组解决了该问题：

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

然后，您必须使用这个新数组，而不是'mat-header-row'和'mat-row'标记中的displayColumns数组：

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

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

Answer 2

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

在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>

您必须将列名称发送到table和matHeaderRowDef并在ngFor中使用常规列

垫表通用模板未加载

2 个答案: