Angular 错误：错误：在 TS 中找不到具有 id 的列

Question

在我的应用程序中，我有一个包含多列的表。 我正在尝试用受尊重的数据填充它，但是当页面打开时，我收到错误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;
  }
}

Answer 1

为了让 angular 正确呈现表格， isPublishedParty应初始化为 true。 否则 *ngIf 会从模板中删除它，你会得到这样的错误。 您可以稍后将isPublishedParty设置为 false，也许在ngAfterViewInit()循环中。

Answer 2

我认为，问题在于，当构造函数中的条件对于“this._materialPlan.IncludePlannedParty”为假时，您隐藏了 ng-container。

所以解决方案可能是从 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');
    }
}