垫子头电池在导航角度后未显示

Question

Mat-Header-cell在页面上看起来不错，但是在导航到第二页并刷新浏览器中的第二页并再次导航到页面上后，它没有在页面上显示。它将在刷新浏览器中的页面后出现。我花了很多时间，但我找不到问题。我已经附上了下面的代码，请查看，如果有人知道出了什么问题，请告诉我。这个问题发生在生产中而不是开发中。谢谢

 ngOnInit() {
    if (this.model instanceof TableMeta) {
      this.table = this.model;
    } else {
      this.table = MetaModelRegistry.get(this.model).table; // get a table config from model reqistry
    }

    this.displayedColumns = combineLatest(this.table.columns.reduce((observables: Observable<boolean>[], col) => {
      // handle showIf property of column
      const show = col.showIf(this.injector, this.route.queryParamMap);
      observables.push(show instanceof Observable ? show : of(show));
      return observables;
    }, [])).pipe(
      map(showCols => {
        const cols = this.table.columns.filter((c, i) => showCols[i])
          .map(c => c.id);
        this.editEnabled && cols.push('edit');
        this.deleteEnabled && cols.push('delete');
        return cols;
      })
    );
    this.displayedFilters = combineLatest( [of(this.table.columns.map(c => c.id))] ).pipe(
        map( ( [cols] ) => {
        const formFields = this.table.filters.fieldSets[0].filter((ff, i) => {
          const id = ff['columnid'] || ff['id'];
          // columnid if present will override id, occasionally needed to sync filter with column for showif
          return cols.includes(id);
        });
        const filters = this.table.filters;
        filters.fieldSets[0] = formFields;
        return filters;
      })
    );
    this.filterQueryParams = this.route.queryParams.pipe(
      map(params => {
        params = Object.assign({}, params);
        delete params['page'];
        delete params['pageSize'];
        return params;
      })
    );
    this.editEnabled = this.disableEdit ? false : this.edit.observers.length > 0;
    if (!this.deleteEnabled) this.deleteEnabled = this.delete.observers.length > 0;
    this.paginationEnabled = this.dataSource instanceof PaginatedDataSource;
    if (this.dataSource instanceof PaginatedDataSource) {
      this.pagination = this.dataSource.pagination;
    }
    this.navRoute = this.routerHelper.getPathRoute(this.router);
  }

<div [ngClass]="cssClasses">
  <table mat-table multiTemplateDataRows="true" [dataSource]="dataSource">

    <ng-container *ngFor='let column of table.columns' [matColumnDef]="column.id">
      <th mat-header-cell *matHeaderCellDef>{{column.name}}</th>
      <td mat-cell *matCellDef="let value;">
        <ng-container *ngIf="column.def; else defaultDef">
          <ng-template [cdkPortalOutlet]="column | colDef: value"></ng-template>
        </ng-container>
        <ng-template #defaultDef>
          <a *ngIf='column["href"]' [href]='getCellHref(column, value)'>
            {{getCellValue(column, value)}}
          </a>
          <a *ngIf='column["routerLink"]' [routerLink]='getCellRouterLink(column, value)'
             [queryParams]='getCellRouterParams(column, value)'>
            {{getCellValue(column, value)}}
          </a>
          <span *ngIf='!(column.routerLink||column.href)'>
              {{getCellValue(column, value)}}
            </span>
        </ng-template>
      </td>
    </ng-container>
 <ng-container *ngIf="displayedColumns | async as cols">
  <tr mat-header-row *matHeaderRowDef="cols"></tr>
  <tr mat-row class="cbdweb-row-separator" *matRowDef="let row; columns: ['separator']; when: separateRowsFn()">
  </tr>
  <tr mat-row *matRowDef="let row; columns: cols;"></tr>
</ng-container>
  </table>
</div>

此错误消息仅在第一次加载但不在生产中时出现在开发中，并且该问题出现在生产中：

core.js:6498 
        
       ERROR Error: Missing definitions for header, footer, and row; cannot determine which columns should be rendered.
    at getTableMissingRowDefsError (table.js:1107:1)
    at MatTable.ngAfterContentChecked (table.js:1491:1)
    at callHook (core.js:2548:1)
    at callHooks (core.js:2507:1)
    at executeInitAndCheckHooks (core.js:2458:1)
    at refreshView (core.js:9525:1)
    at refreshComponent (core.js:10655:1)
    at refreshChildComponents (core.js:9280:1)
    at refreshView (core.js:9534:1)
    at refreshComponent (core.js:10655:1)

meta-model-registry.ts

import { CBDWebMetaModel } from "./cbdweb-meta-model";
import { TableConfigBuilder } from "./datatable/meta/table";
import { FormConfigBuilder } from "./form";

export namespace MetaModelRegistry {

    const metaModels: CBDWebMetaModel[] = [];
    const builders: CBDWebMetaModelBuilder[] = [];

    export function get(model: any) {
      const metaModel = _find(model.constructor, metaModels);
      if (metaModel) return metaModel;
      const builder = _find(model.constructor, builders);
      if (builder) {
        const metaModel = builder.build();
        builders.splice(builders.indexOf(builder), 1);
        metaModels.push(metaModel);
        return metaModel;
      }
      const formMetaModel = _findFormFormMeta(model.identifiedBy,metaModels);
      if(formMetaModel) return formMetaModel;
    }

    export function getBuilder(constructor: Function): CBDWebMetaModelBuilder {
      const metaModel = _find(constructor, metaModels);
      if (metaModel) throw new Error(`Meta model for ${constructor} already exist`);
      let builder = _find(constructor, builders);
      if (!builder) {
        builder = new CBDWebMetaModelBuilder(constructor);
        builders.push(builder);
      }
      return builder;
    }

    export function safeGet(constructor): CBDWebMetaModel {
        let metaModel = get(new constructor());
        if (!metaModel) {
            metaModel = new CBDWebMetaModel(constructor);
            add(metaModel);
        }
        return metaModel;
    }

    export function add(metaModel: CBDWebMetaModel) {
        metaModels.push(metaModel);
    }

    function _find<T extends {model: Function}>(constructor: Function, arr: T[]): T {
      return arr.find(({model}) => constructor == model);
    }

    function _findFormFormMeta(identifiedBy: string, arr: CBDWebMetaModel[]) {
      return arr.find((model) => identifiedBy == model.identifiedBy);
    }

    class CBDWebMetaModelBuilder {//allows to lazily build a meta model when requested. Supports inheritance of meta models

      constructor(readonly model: Function,
                  public identifiedBy = "id",
                  public api?,
                  public table = new TableConfigBuilder(),
                  public form = new FormConfigBuilder()) { }

      build(): CBDWebMetaModel {
        return new CBDWebMetaModel(
          this.model,
          this.identifiedBy,
          this.api,
          this.table.build(),
          this.form.build()
        );
      }

    }

}

Answer 1

从HTML代码中，我认为您缺少将显示的Collumns数组绑定到Mat-Table标头的绑定。

如下所示：

Mat-table display displaycolumns的屏幕截图

，您还可以检查是否有开发工具中有任何错误吗？

请让我知道结果。

PS：我在项目中的几个帕尔斯都使用了Mat-table，它运行良好！