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
    );
  }

模态块排序（？）

1 个答案:

步骤