Как добавить сортировку в mat-list?

Question

Я нашел много решений, но ни одно из них не работает с mat-list. Это необходимо для меня, потому что mat-list - это единственное решение, в котором работает перетаскивание (у таблицы всегда была проблема с таблицей mat-table , и я не могу найти решение, как ее исправить). Есть часть моего html из рабочего списка матов с перетаскиванием, но не знаю, как добавить сортировку:

<div *ngIf="viewList" fxFlex class="list-borders">
    <mat-list cdkDropList (cdkDropListDropped)="drop($event)">
      <mat-list-item>
        <mat-grid-list cols="16" rowHeight="50px" fxFlex  class="title-row">
          <mat-grid-tile colspan="4" class="title-tile">
            Name
          </mat-grid-tile> 
          <mat-grid-tile class="title-tile">
            Extension
          </mat-grid-tile> 
          <mat-grid-tile class="title-tile">
            Status
          </mat-grid-tile> 
          <mat-grid-tile class="title-tile">
            Size
          </mat-grid-tile> 
          <mat-grid-tile colspan="2" class="title-tile">
            Server version
          </mat-grid-tile> 
          <mat-grid-tile colspan="5" class="title-tile">
            Last modified (server)
          </mat-grid-tile> 
          <mat-grid-tile colspan="2">
            Segment name
          </mat-grid-tile>
        </mat-grid-list>
      </mat-list-item>
      <mat-list-item cdkDrag *ngFor="let element of Elements" (click)="navigate(element)" (contextmenu)="onContextMenu($event, element)" >
        <mat-grid-list cols="16" rowHeight="50px" fxFlex>
          <mat-grid-tile colspan="4">
            <mat-icon *ngIf="element.isFolder" color="primary">
              folder
            </mat-icon>
            <mat-icon *ngIf="!element.isFolder" color="primary">
              insert_drive_file
            </mat-icon>
            {{element.name}}
          </mat-grid-tile>
          <mat-grid-tile>
            {{element.extension}}
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-icon *ngIf="element.status == 'online'" class="status-online">
              check_circle
            </mat-icon>
            <mat-icon *ngIf="element.status == 'unknown'" class="status-unknown">
              help
            </mat-icon>
            <mat-icon *ngIf="element.status == 'offline'" class="status-offline">
              report_problem
            </mat-icon>
          </mat-grid-tile>
          <mat-grid-tile>
            {{element.size}}
          </mat-grid-tile>
          <mat-grid-tile colspan="2">
            {{element.serverVersion}}
          </mat-grid-tile>
          <mat-grid-tile colspan="5">
            {{element.lastModified}}
          </mat-grid-tile>
          <mat-grid-tile colspan="2">
            {{element.segmentName}}
          </mat-grid-tile>
        </mat-grid-list>
      </mat-list-item>
    </mat-list>
  </div>

Attepmt 1

Этот код: <mat-grid-tile mat-sort-header="name" colspan="4" class="title-tile">

Причины:

Для этого элемента найдено несколько компонентов. Убедитесь, что селектор только одного компонента может соответствовать данному элементу. Конфликтующие компоненты: MatGridTile, MatSortHeaderng (0)

Обновление 1

Элементы:

export class Element {
  id?: string
  isFolder: boolean
  name: string
  parent: string
  extension?: string
  status?: string
  size?: number
  serverVersion?: string
  lastModified?: string
  segmentName?: string
}

И несколько примеров элементов:

ngOnInit() {
    const folderA = this.fileService.add(
      { 
        name: 'Movies', 
        isFolder: true, 
        parent: 'root',
        status: 'online',
        size: 0,
        serverVersion: '5',
        lastModified: 'added yesterday',
        segmentName: 'IDK'
      }
    );
    this.fileService.add(
      { 
        name: 'Trash', 
        isFolder: true, 
        parent: 'root',
        status: 'unknown',
        size: 0,
        serverVersion: '22',
        lastModified: 'added 2 years ago',
        segmentName: 'WTF'
      }
    );
    this.fileService.add(
      { 
        name: 'how_to_fix_it', 
        isFolder: false, 
        parent: 'root',
        extension: '.txt',
        status: 'offline',
        size: 2048,
        serverVersion: '1',
        lastModified: 'added 1 week ago',
        segmentName: 'NI'
      }
    );
    this.fileService.add(
      { 
        name: 'cute', 
        isFolder: false, 
        parent: 'root',
        extension: '.jpg',
        status: 'online',
        size: 4096,
        serverVersion: '12',
        lastModified: 'added today',
        segmentName: 'WUT'
      }
    );
    const temp = (folderA.id as string);
    this.fileService.add(
      { 
        name: 'Game of thrones', 
        isFolder: true, 
        parent: temp,
        status: 'online',
        size: 0,
        serverVersion: '5',
        lastModified: 'added month ago',
        segmentName: 'OMG'
      }
    );
    this.updateFileElementQuery();

Они пришли в качестве ввода:

  @Input() elements: Element[];

Answer 1

Я немного реструктурировал ваш код, чтобы адаптировать его к неправильному использованию, которое вы должны использовать (было бы правильнее использовать dataTable для сортировки по умолчанию).

Конечно, этим я заложил основу для вашей будущей реструктуризации кода.

html

<div *ngIf="true" fxFlex class="list-borders">

    <mat-grid-list cols="16" rowHeight="50px" class="title-row">
        <div class="flex">
            <mat-grid-tile *ngFor="let tile of tiles;" [colspan]="tile.cols" [rowspan]="tile.rows" [class]="tile.class"
                (click)="sortOnClick(tile);">
                <span class="flex"> {{tile.text}} <mat-icon>{{ !tile.direction ? 'arrow_drop_down' : 'arrow_drop_up' }}</mat-icon> </span>
            </mat-grid-tile>
        </div>
    </mat-grid-list>

    <div cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="elements">
        <!-- (contextmenu)="onContextMenu($event, element)" -->
        <mat-list-item cdkDrag *ngFor="let element of elements">
            <mat-grid-list cols="16" rowHeight="50px" fxFlex>
                <mat-grid-tile colspan="4">
                    <mat-icon *ngIf="element.isFolder" color="primary">
                        folder
                    </mat-icon>
                    <mat-icon *ngIf="!element.isFolder" color="primary">
                        insert_drive_file
                    </mat-icon>
                    {{element.name}}
                </mat-grid-tile>
                <mat-grid-tile>
                    {{element.extension}}
                </mat-grid-tile>
                <mat-grid-tile>
                    <mat-icon *ngIf="element.status == 'online'" class="status-online">
                        check_circle
                    </mat-icon>
                    <mat-icon *ngIf="element.status == 'unknown'" class="status-unknown">
                        help
                    </mat-icon>
                    <mat-icon *ngIf="element.status == 'offline'" class="status-offline">
                        report_problem
                    </mat-icon>
                </mat-grid-tile>
                <mat-grid-tile>
                    {{element.size}}
                </mat-grid-tile>
                <mat-grid-tile colspan="2">
                    {{element.serverVersion}}
                </mat-grid-tile>
                <mat-grid-tile colspan="5">
                    {{element.lastModified}}
                </mat-grid-tile>
                <mat-grid-tile colspan="2">
                    {{element.segmentName}}
                </mat-grid-tile>
            </mat-grid-list>
        </mat-list-item>
    </div>
</div>

angular typescript list
shareeditflag

ts

import { Component, ViewChild, ElementRef, ChangeDetectionStrategy, Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { orderBy } from 'lodash';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  elements = [
    {
      name: 'Movies',
      isFolder: true,
      parent: 'root',
      status: 'online',
      size: 0,
      serverVersion: '5',
      lastModified: 'added yesterday',
      segmentName: 'IDK'
    },
    {
      name: 'Trash',
      isFolder: true,
      parent: 'root',
      status: 'unknown',
      size: 0,
      serverVersion: '22',
      lastModified: 'added 2 years ago',
      segmentName: 'WTF'
    },
    {
      name: 'how_to_fix_it',
      isFolder: false,
      parent: 'root',
      extension: '.txt',
      status: 'offline',
      size: 2048,
      serverVersion: '1',
      lastModified: 'added 1 week ago',
      segmentName: 'NI'
    },
    {
      name: 'cute',
      isFolder: false,
      parent: 'root',
      extension: '.jpg',
      status: 'online',
      size: 4096,
      serverVersion: '12',
      lastModified: 'added today',
      segmentName: 'WUT'
    },
    {
      name: 'Game of thrones',
      isFolder: true,
      parent: 'temp',
      status: 'online',
      size: 0,
      serverVersion: '5',
      lastModified: 'added month ago',
      segmentName: 'OMG'
    }
  ];

  tiles = [
    { text: 'name', cols: 4, rows: 1, class: 'title-tile', direction: false },
    { text: 'extension', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'status', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'size', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'serverVersion', cols: 2, rows: 1, class: 'title-tile', direction: false },
    { text: 'lastModified', cols: 5, rows: 1, class: 'title-tile', direction: false },
    { text: 'segmentName', cols: 2, rows: 1, class: 'title-tile', direction: false },
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }

  constructor() {
  }

  sortOnClick(tile) {
    this.elements = orderBy(this.elements, [tile.text], [tile.direction ? 'asc' : 'desc']);
    tile.direction = !tile.direction
  }

}

css

.flex {
  display: flex;
}

Здесь можно найти блики стека:

https://stackblitz.com/edit/add-angular-material-4aaevt