[英]Angular Error: Error: Could not find column with id when it's in TS
In my app, I have a table with multiple columns.在我的应用程序中,我有一个包含多列的表。 I'm trying to fill it with the respected data but when the page opens I get the error
Could not find column with id "PublishedParty"
yet, it's in the TS file.我正在尝试用受尊重的数据填充它,但是当页面打开时,我收到错误
Could not find column with id "PublishedParty"
,它在 TS 文件中。 Here is my code, what is wrong with it?这是我的代码,它有什么问题?
HTML: 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: 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;
}
}
For angular to render the table correctly isPublishedParty
should be initialized as true.为了让 angular 正确呈现表格,
isPublishedParty
应初始化为 true。 Otherwise *ngIf removes it from the template and you would get such an error.否则 *ngIf 会从模板中删除它,你会得到这样的错误。 You could set
isPublishedParty
to false at later time, perhaps in ngAfterViewInit()
cycle.您可以稍后将
isPublishedParty
设置为 false,也许在ngAfterViewInit()
循环中。
I think, the problem is, that you hide the ng-container when the condition in your constructor is false for "this._materialPlan.IncludePlannedParty".我认为,问题在于,当构造函数中的条件对于“this._materialPlan.IncludePlannedParty”为假时,您隐藏了 ng-container。
So the solution could be, to remove the column name from the displayColumns array:所以解决方案可能是从 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');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.