Question

我想在表格中使用角度材质标题排序和分页器。它们在正常页面上工作，但是当我在模式“ ng-template”中使用它们时，我会遇到一些问题。例如 ng-template不在DOM中，排序和分页器变为undefined。有什么解决方案或建议吗？

代码如下：

    displayedColumnsModal = ['tarih', 'docode', 'trcode', 'aciklama', 'borc', 'alacak','fark'];
dataSourceModal: MatTableDataSource<any>;
   sortModal;
   paginationModal;
   @ViewChild(MatSort) set content(content: ElementRef) {
    this.sortModal = content;
if(this.sortModal){this.dataSourceModal.sort = this.sortModal;}}

<ng-template #detaymodal let-c="close" let-d="dismiss">

<h2>{{singleuser.definitioN_}}</h2>
<br />

<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
  <span aria-hidden="true">&times;</span>
</button>

<div class="example-container mat-elevation-z8">

  <mat-table [dataSource]="dataSourceModal" matSort>

    <!-- ID Column -->
    <ng-container matColumnDef="tarih">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Tarih </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.datE_  | date :'dd.MM.yyyy'}} </mat-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="docode">
      <mat-header-cell *matHeaderCellDef mat-sort-header> DOCODE </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.docode}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="trcode">
      <mat-header-cell *matHeaderCellDef mat-sort-header> TRCODE </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.trcode}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="aciklama">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Açıklama </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.aciklama}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="borc">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Borc </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.borc}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="alacak">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Alacak </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.alacak}} </mat-cell>
    </ng-container>

    <!-- Color Column -->
    <ng-container matColumnDef="fark">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Bakiye </mat-header-cell>
      <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.fark}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumnsModal"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumnsModal;">
    </mat-row>
  </mat-table>

  <mat-paginator [pageSizeOptions]="[25, 50, 100]"></mat-paginator>
</div>

使用ViewChild在ng模板中对角材料标头进行排序

0 个答案: