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

Question

mat-sort 和 paginator 在 ng-modal 表中不起作用。但在模态之外它工作正常。这个问题有解决办法吗？

Answer 1

问题在于，当您尝试分配 mat-sort 时，mat-sort 无法访问 - 因为它实际上没有显示 -。您需要指定 mat-sort after 显示。如果您使用 mat-dialog，则在打开时使用 setTimeout()。你可以认为 setTimeout 就像你对 Angular 说的：“渲染后，别忘了执行这个指令”

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 仅当元素始终显示在组件中时才使用它-

更新确实提出的解决方案不起作用。在模板中，“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 mat-table [dataSource]="dataSource"
  matSort fool
  class="mat-elevation-z8">
 ....
</table>

查看 [stackblitz][1]

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

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

那么，唯一的就是，在添加Paginator的时候写

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

唯一的改变是在styles.css中添加.css

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

否则选择的页数不显示 - 它显示，但在弹出窗口下

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