En mi aplicación, tengo una tabla con varias columnas. Estoy tratando de llenarlo con los datos respetados, pero cuando se abre la página aparece el error Could not find column with id "PublishedParty" todavía, está en el archivo TS. Aquí está mi código, ¿qué tiene de malo?
HTML:
<ng-container *ngIf="isPublishedParty == true" matColumnDef="PublishedParty"> <th mat-header-cell *matHeaderCellDef mat-sort-header style="min-width: 100px !important;" [ngStyle]="{'color': 'black'}" style="text-align: center;"> <b> Planlanan Miktar </b> </th> <td mat-cell *matCellDef="let row; let i = index" style="min-width: 100px !important;" style="text-align: center;"> <div> Miktar: {{row.PublishedPartyQuantity | number}} </div> <div> Parti: {{row.PublishedPartyCount | number}} </div> </td> </ng-container>TS:
isPublishedParty = false; private _materialPlan: IMaterialPlan = {}; @Input() set MaterialPlan(prm: IMaterialPlan){ this._materialPlan = prm; } get MaterialPlan(): IMaterialPlan { return this._materialPlan; } displayedColumns: string[] = [ 'StockIntegrationCode', 'ReceiptName', 'PublishedParty', ]; dataSource: MatTableDataSource<IMaterialPlanReceiptResult>; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; constructor( ) { if(this._materialPlan.IncludePlannedParty == true){ this.isPublishedParty == true; } }Para que angular represente la tabla correctamente, isPublishedParty debe inicializarse como verdadero. De lo contrario, *ngIf lo elimina de la plantilla y obtendrá ese error. Puede establecer isPublishedParty en falso en un momento posterior, tal vez en el ciclo ngAfterViewInit() .
Creo que el problema es que oculta el contenedor ng cuando la condición en su constructor es falsa para "this._materialPlan.IncludePlannedParty".
Entonces, la solución podría ser eliminar el nombre de la columna de la matriz displayColumns:
private _materialPlan: IMaterialPlan = {}; @Input() set MaterialPlan(prm: IMaterialPlan){ this._materialPlan = prm; } get MaterialPlan(): IMaterialPlan { return this._materialPlan; } displayedColumns: string[] = []; dataSource: MatTableDataSource<IMaterialPlanReceiptResult>; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; @ViewChild(MatSort, { static: true }) sort: MatSort; constructor( ) { this.displayedColumns = [ 'StockIntegrationCode', 'ReceiptName', ]; if(this._materialPlan.IncludePlannedParty == true){ this.isPublishedParty == true; this.displayedColumns.push('PublishedParty'); } }