Angular 11 - mat-sort 在 ng-modal 中不起作用 table

Question

mat-sort 和分页器在 ng-modal 中不工作 table。但在模态之外它工作正常。这个问题有解决办法吗？

Answer 1

问题是，当您尝试分配 mat-sort 时，mat-sort 无法访问 - 因为它实际上没有显示 -。您需要在显示的 after 之后指定 mat-sort。如果您使用的是 mat-dialog，则在打开时使用 setTimeout()。您可以像对 Angular 说的那样思考 setTimeout：“渲染后，不要忘记执行此指令”

const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: '250px', data: {name: this.name, animal: this.animal} }); setTimeout(()=>{ //<--here you say to Angular the sort this.dataSource.sort = this.sort; })

如果您使用的是 ng-bootstrap 模态

open(content) { this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); setTimeout(()=>{ //<--here you say to Angular the sort this.dataSource.sort = this.sort; }) }

注意：请记住，由于 mat-table 始终不可见，因此 mat-sort ViewChild 应该像

@ViewChild(MatSort) sort: MatSort;

~~不使用 {static true} -static true 仅当元素始终显示在组件中时才使用它-~~

更新果然建议的解决方案不行。在模板中，“viewChild 不可访问。所以我唯一得到的就是创建一个傻瓜指令

@Directive({
  selector: '[fool]',
  exportAs: 'fool'
})
export class FoolDirective implements OnInit {
  ngOnInit()
  {
    setTimeout(()=>{
      (this.table.dataSource as any).sort=this.sort
    })
  }
  constructor(@Optional() private sort:MatSort,@Optional() private table:MatTable<any>){}
}

所以，我们只需要将这个指令添加到我们的 table

<table mat-table [dataSource]="dataSource"
  matSort fool
  class="mat-elevation-z8">
 ....
</table>

查看 [stackblitz][1]

Update2 要添加分页器，事情就复杂多了。我的想法是改进我们的指令傻瓜，添加一个 MatPaginator 作为可选并作为输出发送

export class FoolDirective implements OnInit {
  @Output() paginatorLoaded:EventEmitter<MatPaginator>=new EventEmitter<MatPaginator>()
  ngOnInit()
  {
    setTimeout(()=>{
      if (this.table && this.sort)
        (this.table.dataSource as any).sort=this.sort
      if (this.paginator)
        this.paginatorLoaded.emit(this.paginator)
    })
  }
  constructor(@Optional() private sort:MatSort,@Optional() private table:MatTable<any>,@Optional() private paginator:MatPaginator){}
}

然后，唯一的就是，在添加分页器时写

<mat-paginator  fool 
         (paginatorLoaded)="dataSource.paginator=$event"
....>
</mat-paginator>

唯一的方法是更改 .css 添加 styles.css

.cdk-overlay-container {
  z-index: 9000;
}

否则select页数不显示-它显示了，但在弹出

下

注意：我真的不太喜欢这些解决方法，也许是时候重新考虑并使用另一个弹出窗口了——例如material- 或将 ngb-bootstrap 模态与组件或模板一起使用。 [1]: https://stackblitz.com/edit/angular-hbadro?file=src%2Fapp%2Ffool.directive.ts

Angular 11 - mat-sort 在 ng-modal 中不起作用 table

Angular 11 - mat-sort is not working in ng-modal table

sorting

angular-material

ng-modal

angular