Question

我正在尝试删除内置消息：

按值升序/降序排序

在mat-sort-header中。每次我点击标题进行排序时都会出现。我正在使用角度2.这是我正在测试的代码：https://material.angular.io/components/sort/overview

该消息未在示例中显示，但是当我在我的PC上运行时，它已显示。

示例代码如下：

HTML：

 <table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

TS：

import {Component} from '@angular/core';
import {Sort} from '@angular/material';

/**
 * @title Sorting overview
 */
@Component({
  selector: 'sort-overview-example',
  templateUrl: 'sort-overview-example.html',
  styleUrls: ['sort-overview-example.css'],
})
export class SortOverviewExample {
  desserts = [
    {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24',         protein: '4'},
    {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'},
{name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'},
{name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'},
{name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'},
  ];

  sortedData;

  constructor() {
    this.sortedData = this.desserts.slice();
  }

  sortData(sort: Sort) {
    const data = this.desserts.slice();
    if (!sort.active || sort.direction == '') {
      this.sortedData = data;
      return;
    }

    this.sortedData = data.sort((a, b) => {
      let isAsc = sort.direction == 'asc';
      switch (sort.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'calories': return compare(+a.calories, +b.calories, isAsc);
        case 'fat': return compare(+a.fat, +b.fat, isAsc);
        case 'carbs': return compare(+a.carbs, +b.carbs, isAsc);
        case 'protein': return compare(+a.protein, +b.protein, isAsc);
        default: return 0;
      }
    });
  }
}

function compare(a, b, isAsc) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

CSS：

.mat-sort-header-container {
  align-items: center;
}

结果截图： clicking on header 1st time

clicking on header 2nd time

clicking on header 3rd time

Answer 1

你正面临这个问题，因为你还没有添加主题的css

在你的CSS中添加这个样式，消息就会消失：

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

但我建议 FOLLOW THIS STEP

Answer 2

这可以通过在styles.css文件中导入任何预先构建的样式来实现。

预制款式： 1. deeppurple-amber.css 2. indigo-pink.css 3. pink-bluegrey.css 4. purple-green.css

例如：

@进口＆＃39; ~@angular/material/prebuilt-themes/deeppurple-amber.css' ;;

删除mat-sort-header中的默认消息

2 个答案: