Угловая таблица матов: - при сортировке отсутствует значок сортировки

Question

Значок сортировки матов не отображается, когда мы сортируем таблицу матов по коду. Как можно сделать сортировку по нажатию кнопки, а не по нажатию на заголовок мат.

Ссылка StackBlitzzzz

Answer 1

Изначально я думал, что проблема проста, но, продолжая читать документацию и исходный код, материал Angular не предлагает эту функциональность, можно заметить, что он не работает, подписавшись на:

 ngAfterViewInit() {
    this.sort.sortChange.subscribe((x) => {
      console.log(x);
    });
  }

Ответ консоли будет:

{active: "name", direction: "asc"}

Таким образом, будет активирован идентификатор столбца и будет выполнена сортировка, но значок не появится.

Я пришелс 2 вариантами реализации, вы можете выбрать одну подходящую для вас.

РЕШЕНИЕ 1:

Быстрое, но немного скромное решение - заставить всезначок, но не будет иметь большого смысла, потому что мы хотим сосредоточиться на одном столбце.Чтобы сделать это, просто сделайте это в css:

::ng-deep .mat-sort-header-arrow {
  opacity: 1 !important;
 }

Все значки в заголовке будут отображаться только в заголовке с атрибутом mat-sort-header, и изменение значка будет инициировано в активном столбце.

Stackblitz: https://stackblitz.com/edit/mattable-with-custom-sort-etzkcy

РЕШЕНИЕ 2:

Это немного странно, поэтому для запуска анимации на иконке нам нужнонажать на заголовок.Для этого я вызываю событие click из компонента в ячейке mat-header, но ячейка mat-header не активируется, поэтому я оборачиваю имя столбца внутри элемента div, чтобы смоделировать щелчок

      <mat-header-cell *matHeaderCellDef mat-sort-header>
        <div #position>Position</div>
      </mat-header-cell> 

В компоненте нам нужно создать viewchildren для всех отображаемых столбцов, которые мы хотим симулировать кликом:

@ViewChild('position') position:ElementRef;
@ViewChild('name') name:ElementRef; 

В вашем методе sortTest (val) я начинаю становиться намного более хакерским, поэтому япереключите значение строки, передаваемой в качестве параметра в val, чтобы вызвать правый клик на правом заголовке, потому что имя div и столбца 1: 1

 switch(val) {
      case "name": { 
        this.name.nativeElement.click()
        this.name.nativeElement.click()            
        break; 
        } 
      case "position": { 
        this.position.nativeElement.click()
        this.position.nativeElement.click()            
        break; 
      }
    } 

Почему я звоню

            this.position.nativeElement.click()

2 раза?Из того, что я понимаю,

    this.sort.active = val;

считается как щелчок, но без отображения значка, поэтому мы будем возвращаться в прежнем порядке, чтобы избежать повторного вызова 2 раза.нечетно.

После всего этого хакерского кода, который я генерирую, вроде

this.sort.active = val;

    this.dataSource.sort = this.sort;
    const sortState: Sort = {active: val, direction: this.sort.direction === 'asc' ? 'desc' : 'asc'};

    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState); 

Я не нашел лучшего решения, даже поиска в Интернете, по документации и по исходному коду angularматериал.Я нашел такой вопрос без единого ответа.

Stackblitz этого решения: https://stackblitz.com/edit/mattable-with-custom-sort-emqkbs