Angular 4材质标题排序问题

Question

我使用了角4材料作为桌子。我面临两个问题 1.排序表时，它显示标题排序顺序的描述。我想删除它。

此处显示＆＃34;按升序排序。＆＃34;。我使用过ngx模态主题 http://akveo.com/ngx-admin/#/pages/

＆＃13;

＆＃13;

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'
  }
];

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

有人知道吗？我在不使用ngx主题的情况下单独运行此代码我能够获得正确的外观和填充但是在项目中我无法得到它。

Answer 1

您获得该排序消息有两个原因：

1. 未导入材质主题css

   @import＆＃39; ~@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取消注释导入行，并从文件中删除上面的代码再次检查