Общий шаблон таблицы матов не загружается

Попытка создать общую таблицу, которая будет принимать столбцы из файла TS и загружать данные.

Получение этой ошибки:

ng: ///AppModule/TableBasicExample.ngfactory.js: 56 ОШИБКА Ошибка: не удалось найти столбец с идентификатором «[объект объекта]».

Код:

/*
* @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>

mat-table
person Sumit    schedule 02.01.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я столкнулся с той же ошибкой и решил ее, добавив строковый массив только со свойствами столбцов:

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

Затем вы должны использовать этот новый массив вместо массива displayColumns в тегах 'mat-header-row' и 'mat-row':

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

Я предполагаю, что ошибка говорит о том, что mat-row ищет строку с 'matColumnDef', равным каждому из предоставленных столбцов, но получает объект вместо самого свойства, если это объект, он не знает, что свойство использовать.

person Andres Pino    schedule 01.08.2019
comment
спасибо, что он работает, но как насчет заголовка столбца? как я могу использовать это, когда я конвертирую свои столбцы в простой массив строк (я знаю, что могу найти реальный путем обходных путей), но это неправильный путь - person Amirreza; 20.12.2019

arrow_upward
1
arrow_downward

я нашел решение, внимательно прочитав документацию :)

in 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

person Amirreza    schedule 19.12.2019