javascript - Angular 4 Material 标题排序问题

Question

我在 table 上使用了 angular 4 Material 。我面临两个问题1. 对表格进行排序时，它会在标题处显示排序顺序的说明。我想删除它。

此处显示“按升序排序”。我使用了 ngx 模态主题 http://akveo.com/ngx-admin/#/pages/

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 主题的情况下单独运行此代码，我能够获得正确的外观和填充，但在项目中我无法获得它。

Answer 1

您收到排序消息的原因可能有 2 个:

1. 未导入 Material 主题 css

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

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

---

解决方案:

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

或(如果您不想导入样式)

// add css to component
.cdk-visually-hidden{
  display: none !important;
}

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

WORKING DEMO (不导入css)

您可以取消注释来自根 styles.css 的导入行，并再次从文件检查中删除上面的代码