时间戳

首页 > 解决方案 > 模态块排序（？）

angular - 模态块排序（？）

问题描述

我是 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>

抱歉格式化。

标签： angularfrontendangular-directive

解决方案

问题的根本原因是，ViewChild在 中不起作用ng-template，因为它不是DOM.

对于您的情况，您可以为您的模态创建一个组件并通过组件方式打开。在此处查看文档

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

推荐阅读