Javascript 角度4物料标题分拣问题

我在桌子上用了4种有棱角的材料。我面临两个问题 1.对表格进行排序时，它会在标题处显示排序顺序的说明。我想把它去掉。

这里显示的是“按升序排序”。我使用了来自的ngx模态主题

从'@angular/core'导入{Component，ViewChild，Input}；
从“@angular/material”导入{MatTableDataSource，MatSort，MatPaginator}；
从“../../../@core/data/alert details.service”导入{alertDetails服务}；
从“@angular/cdk/table”导入{DataSource}；
从“@ng bootstrap/ng bootstrap”导入{NgbModal，NgbActiveModal，modaldismissreases}”；
从“../modal/modal.component”导入{ModalComponents}；
从“../alertmodal/modal.component”导入{ModalComponentsAlert}
/**
*@带排序的标题表
*/
@组成部分({
选择器：“警报”，
templateUrl:'./alerts.component.html'，
样式URL:['./alerts.component.scss']
})
导出类警报组件{
displayedColumns=[“位置”、“名称”、“重量”、“符号”]；
数据源=新MatTableDataSource（元素数据）；
@ViewChild（MatSort）排序：MatSort；
/**
*在视图初始化之后设置排序，因为此组件将
*能够查询初始化排序的视图。
*/
ngAfterViewInit（）
{
this.dataSource.sort=this.sort；
}
}
导出接口元素
{
名称：字符串；
职位：编号；
重量：个数；
符号：字符串；
}
常量元素_数据：元素[]=[
{
职位:1,，
名称：“氢”，
重量：1.0079，
符号：“H”
},
{
职位：2，
名称：'氦'，
重量：4.0026，
符号：“他”
},
{
职位：3，
名称：'锂'，
重量：6.941，
符号：“李”
},
{
职位：4，
名称：“铍”，
重量：9.0122，
符号：“Be”
},
{
职位：5，
名称：'硼'，
重量：10.811，
符号：“B”
},
{
职位：6，
名称：“碳”，
重量：12.0107，
符号：“C”
},
{
职位：7，
名称：“氮”，
重量：14.0067，
符号：“N”
},
{
职位：8，
名称：“氧气”，
重量：15.9994，
符号：“O”
},
{
职位：9，
名称：'氟'，
重量：18.9984，
符号：“F”
},
{
职位：10，
名称：“霓虹灯”，
体重：20.1797，
符号：“Ne”
},
{
职位：11，
名称：'钠'，
重量：22.9897，
符号：“Na”
},
{
职位：12，
名称：“镁”，
体重：24.305，
符号：“Mg”
},
{
职位：13，
名称：“铝”，
重量：26.9815，
符号：“Al”
},
{
职位：14，
名称：'硅'，
重量：28.0855，
符号：“Si”
},
{
职位：15，
名称：“磷”，
重量：30.9738，
符号：“P”
},
{
职位：16，
名称：'硫'，
重量：32.065，
符号：“S”
},
{
职位：17，
名称：'氯'，
体重：35.453，
符号：“Cl”
},
{
职位：18，
名称：'氩'，
重量：39.948，
符号：“Ar”
},
{
职位：19，
名称：“钾”，
重量：39.0983，
符号：“K”
},
{
职位：20，
名称：'钙'，
重量：40.078，
符号：“Ca”
}
];
。示例容器{
显示器：flex；
弯曲方向：立柱；
最小宽度：300px；
}
.席子桌{
溢出：自动；
最大高度：500px；
}
.mat-header-cell.mat-sort-header-sorted{
颜色：黑色；
}

不
{{element.position}
名称
{{element.name}
重量
{{element.weight}}
象征
{{element.symbol}
您收到排序消息的原因可能有两个：

未导入材质主题css

@导入“~@angular/material/prebuild themes/deeppurple amber.css”

您正在使用的主题忘记处理排序消息


解决方案：

// import the css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

或（如果不想导入样式）

（不导入css）

您可以从root
styles.css中取消对导入行的注释，并从文件中删除上述代码。再次检查
谢谢Vivek。它与css.cdk-visually-hidden一起工作，就像champ bro一样工作。非常有用的答案+1
// add css to component
.cdk-visually-hidden{
  display: none !important;
}

// add this line to @Component
encapsulation : ViewEncapsulation.None