我在桌子上使用了 angular 4 材料。我面临两个问题 1. 对表格进行排序时，它会在标题处显示排序顺序的描述。我想删除它。
这里它显示“按升序排序。”。我使用了来自 http://akveo.com/ngx-admin/#/pages/的 ngx 模态主题
import {Component, ViewChild,Input} from '@angular/core';
import {MatTableDataSource, MatSort,MatPaginator} from '@angular/material';
import { AlertDetailsService } from '../../../@core/data/alert-details.service';
import {DataSource } from '@angular/cdk/table';
import {NgbModal, NgbActiveModal,ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import {ModalComponents} from '../modal/modal.component';
import { ModalComponentsAlert} from '../alertmodal/modal.component'
/**
* @title Table with sorting
*/
@Component({
selector: 'alerts',
templateUrl: './alerts.component.html',
styleUrls: ['./alerts.component.scss']
})
export class AlertsComponent {
displayedColumns = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);
@ViewChild(MatSort) sort: MatSort;
/**
* Set the sort after the view init since this component will
* be able to query its view for the initialized sort.
*/
ngAfterViewInit()
{
this.dataSource.sort = this.sort;
}
}
export interface Element
{
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: Element[] = [
{
position: 1,
name : 'Hydrogen',
weight : 1.0079,
symbol : 'H'
},
{
position: 2,
name : 'Helium',
weight : 4.0026,
symbol : 'He'
},
{
position: 3,
name : 'Lithium',
weight : 6.941,
symbol : 'Li'
},
{
position: 4,
name : 'Beryllium',
weight : 9.0122,
symbol : 'Be'
},
{
position: 5,
name : 'Boron',
weight : 10.811,
symbol : 'B'
},
{
position: 6,
name : 'Carbon',
weight : 12.0107,
symbol : 'C'
},
{
position: 7,
name : 'Nitrogen',
weight : 14.0067,
symbol : 'N'
},
{
position: 8,
name : 'Oxygen',
weight : 15.9994,
symbol : 'O'
},
{
position: 9,
name : 'Fluorine',
weight : 18.9984,
symbol : 'F'
},
{
position: 10,
name : 'Neon',
weight : 20.1797,
symbol : 'Ne'
},
{
position: 11,
name : 'Sodium',
weight : 22.9897,
symbol : 'Na'
},
{
position: 12,
name : 'Magnesium',
weight : 24.305,
symbol : 'Mg'
},
{
position: 13,
name : 'Aluminum',
weight : 26.9815,
symbol : 'Al'
},
{
position: 14,
name : 'Silicon',
weight : 28.0855,
symbol : 'Si'
},
{
position: 15,
name : 'Phosphorus',
weight : 30.9738,
symbol : 'P'
},
{
position: 16,
name : 'Sulfur',
weight : 32.065,
symbol : 'S'
},
{
position: 17,
name : 'Chlorine',
weight : 35.453,
symbol : 'Cl'
},
{
position: 18,
name : 'Argon',
weight : 39.948,
symbol : 'Ar'
},
{
position: 19,
name : 'Potassium',
weight : 39.0983,
symbol : 'K'
},
{
position: 20,
name : 'Calcium',
weight : 40.078,
symbol : 'Ca'
}
];.example-container {
display: flex;
flex-direction: column;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
.mat-header-cell.mat-sort-header-sorted {
color: black;
}<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef mat-sort-header> No.</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef mat-sort-header> Weight</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}}</mat-cell>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef mat-sort-header> Symbol</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>有人知道吗？我在不使用 ngx 主题的情况下单独运行此代码，我能够获得正确的外观和填充，但在项目中我无法获得它。