В моем приложении у меня есть таблица с несколькими столбцами. Я пытаюсь заполнить его уважаемыми данными, но когда страница открывается, я все же получаю ошибку 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;
  }
}
0
Hectic Platypus 26 Янв 2022 в 14:32
it's in the TS file Этого не может быть, поскольку ожидается, что столбец с идентификатором "PublishedParty" будет в HTML-коде, а не в Typescript. Не уверен, какая именно часть кода ожидает найти элемент с идентификатором в приложении Angular, хотя
 – 
Jeremy Thille
26 Янв 2022 в 14:36
Я имею в виду, что это также в displayedColumns. Тем не менее, он не может найти этот элемент. @JeremyThille
 – 
Hectic Platypus
26 Янв 2022 в 14:40
Установлено ли для параметра this._materialPlan.IncludePlannedParty значение true? И что происходит, когда вы позволяете этому быть правдой? Возможно, вам придется удалить ColumnName из отображаемых столбцов, когда условие для this._materialPlan.IncludePlannedParty не соответствует действительности.
 – 
Kevin Glier
26 Янв 2022 в 14:49
Я пытаюсь отобразить столбец PlannedParty, когда для него установлено значение true. Но сейчас это не так. Как я могу удалить ColumnName, если оно ложно? @КевинГлиер
 – 
Hectic Platypus
26 Янв 2022 в 14:52

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');
    }
}
0
Kevin Glier 26 Янв 2022 в 14:57
Спасибо, но теперь все столбцы пропали. Даже те, которые были установлены на true
 – 
Hectic Platypus
26 Янв 2022 в 15:07
Вы можете попробовать решение Joosep.P. Если это не поможет, вы можете попробовать переместить код в моем примере из конструктора в установщик MaterialPlan (в начале)
 – 
Kevin Glier
26 Янв 2022 в 15:13
Хорошо, спасибо, когда я переместил его в сеттер, он сработал.
 – 
Hectic Platypus
26 Янв 2022 в 15:19

Чтобы angular правильно отображал таблицу, isPublishedParty должен быть инициализирован как true. В противном случае *ngIf удалит его из шаблона, и вы получите такую ​​ошибку. Вы можете установить isPublishedParty в false позже, возможно, в цикле ngAfterViewInit().

0
Joosep.P 26 Янв 2022 в 14:53