带有过滤器的 mat table 列排序箭头不可见

Question

我是 angular 的新手... 我的 mat-table 工作正常，但是当列具有过滤器和排序功能时，排序箭头在具有过滤器的列上不可见。 我试图调整列的宽度，但无论列有多大或多小，箭头都不可见。 有重现我的问题的示例项目。

https://stackblitz.com/edit/angular-hbakxo-sdjyya?file=app%2Ftable-filtering-example.ts

Answer 1

设置您的列宽使其显示

.mat-column-position {
 width: 25%;
}

Answer 2

只有大于mat表单域的列宽才会可见

为了减小表单字段的宽度，请使用精确大小而不是 %。百分比不改变排序 header 宽度

.mat-form-field {
    font-size: 13px;
    width: 110px; //put the value you need
  }

这是您 link 的 slackblitz 编辑。