В моем приложении у меня есть таблица с несколькими столбцами. Я пытаюсь заполнить его уважаемыми данными, но когда страница открывается, я все же получаю ошибку Could not find column with id "PublishedParty"
, она находится в файле TS. Вот мой код, что с ним не так?
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;
}
}
2 ответа
Я думаю, проблема в том, что вы скрываете ng-контейнер, когда условие в вашем конструкторе ложно для «this._materialPlan.IncludePlannedParty».
Таким образом, решением может быть удаление имени столбца из массива 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');
}
}
true
Чтобы angular правильно отображал таблицу, isPublishedParty
должен быть инициализирован как true. В противном случае *ngIf удалит его из шаблона, и вы получите такую ошибку. Вы можете установить isPublishedParty
в false позже, возможно, в цикле ngAfterViewInit()
.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
it's in the TS file
Этого не может быть, поскольку ожидается, что столбец с идентификатором "PublishedParty" будет в HTML-коде, а не в Typescript. Не уверен, какая именно часть кода ожидает найти элемент с идентификатором в приложении Angular, хотяdisplayedColumns
. Тем не менее, он не может найти этот элемент. @JeremyThille