模态块排序（？）

Question

我是Angular的新手并且遇到了一些问题。我有一个模态表，我无法对其进行排序。我测试了模态外的表格，排序工作正常，所以我认为问题是模态。

有人可以帮忙吗？

https://stackblitz.com/edit/angular-vwy8a2?file=app%2Ftable-sorting-example.html

这是我的.ts的模态函数：

 openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(
      template,
      Object.assign({}, { class: 'gray modal-lg' })
    );
  }

和html文件：

<span class="badge badge" (click)="openModal(statusInfoTemp)"><span class="fa fa-comment " ></span> 1</span>           

<ng-template #statusInfoTemp>
  <div class="modal-header">
    <h4 class="modal-title pull-right">Historia zmian</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
    <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div>
          <mat-table [dataSource]="dataSource"  matSort matSortActive="comment" matSortDirection="asc">

              <ng-container matColumnDef="date">
                  <mat-header-cell *matHeaderCellDef mat-sort-header> Date </mat-header-cell>
                  <mat-cell *matCellDef="let status"> {{status.date | date:'medium'}} </mat-cell>
                </ng-container>

                <ng-container matColumnDef="user">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> User </mat-header-cell>
                    <mat-cell *matCellDef="let status"> {{status.user}} </mat-cell>
                  </ng-container>

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

                    <ng-container matColumnDef="comment">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Comment </mat-header-cell>
                        <mat-cell *matCellDef="let status"> {{status.comment}} </mat-cell>
                      </ng-container>

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

                    </div>

      <div class="modal-footer"> 
      </div>  

</ng-template>

抱歉格式化。

Answer 1

问题的根本原因是，ViewChild不在ng-template工作，因为它不是DOM的一部分。

对于您的情况，您可以为模态创建组件并通过组件方式打开。 see documentation here

然后matSort将在您的对话框组件中定义，并将正常工作

脚步

1 - 创建一个名为StatusInfoDialogComponent的新组件，并将其添加为app.module中的entryComponent

2 - 将ng-template和相关代码中的所有html移动到该组件

3 - 在旧的component.ts中将打开的对话框更改为类似的内容

openModal() {
    this.modalRef = this.modalService.show(
      StatusInfoDialogComponent,
      Object.assign({}, { class: 'gray modal-lg' }) // and pass datasource to that component
    );
  }