Не могу отсортировать мат-стол - PullRequest
Новая
       16

Не могу отсортировать мат-стол

0 голосов
/ 25 марта 2019

Я пытаюсь использовать mat-sort-header из углового материала для сортировки таблицы.

Я получаю данные, содержащиеся в таблице, из запроса http.Данные отображаются нормально, но сортировка не работает.Я могу видеть испущенные события, когда нажимаю на столбцы, но строки сохраняют тот же порядок.

Я видел, что у некоторых людей уже была эта проблема, поэтому я попробовал следующее:

  • упаковка this.dataSource.sort = this.sort внутри setTimeOut

  • , делающая это внутри ngOnViewInit

Вот мой HTML-шаблон: 

<div class="example-container mat-elevation-z8">
      <table mat-table [dataSource]="nagiosData" matSort (matSortChange)="sortData($event)">

        <ng-container matColumnDef="hostName">
          <th mat-header-cell mat-sort-header *matHeaderCellDef> Host name </th>
          <td mat-cell *matCellDef="let element"> {{element.hostName}} </td>
        </ng-container>

        <ng-container matColumnDef="pluginOutput">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Plugin output </th>
          <td mat-cell *matCellDef="let element"> {{element.pluginOutput}} </td>
        </ng-container>

        <ng-container matColumnDef="currentState">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
          <td mat-cell *matCellDef="let element">
            <span *ngIf="element.currentState == 0; else red" class="dot"></span>
          </td>
        </ng-container>

        <ng-container matColumnDef="services">
          <th mat-header-cell *matHeaderCellDef> Services </th>
          <td mat-cell *matCellDef="let element"> <button mat-raised-button color="primary">See Services</button> </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

      </table>


    </div>

    <ng-template #red>
      <span class="redDot"></span>
    </ng-template>

и мой Компонент: 

import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import {DataLoaderService} from '../data-loader.service';
import {MatPaginator, MatTableDataSource, MatSort, MatTable} from '@angular/material';

@Component({
  selector: 'app-nagios-view',
  templateUrl: './nagios-view.component.html',
  styleUrls: ['./nagios-view.component.css']
})
export class NagiosViewComponent implements OnInit, AfterViewInit {

  public data = [];
  public nagiosData = [];


  displayedColumns: string[] = ['hostName', 'pluginOutput', 'currentState', 'services'];
  dataSource: MatTableDataSource<any>;

  @ViewChild(MatTable) table: MatTable<any>;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private dls: DataLoaderService) { }

 public loadNagiosData(){
    this.dls.getNagiosInfo().subscribe( data => {
      this.nagiosData = JSON.parse(data.mesureList[0].description).hosts;
      this.dataSource = new MatTableDataSource(this.nagiosData);

      setTimeout(() => {
        this.dataSource.sort = this.sort;
      });

    })
  }

  sortData(e) {
    console.log(e);
  }

  ngOnInit() {

  }

  ngAfterViewInit(): void {
    // this.loadData();
    this.loadNagiosData();
  }

Данные, которые я получаю по http, представляют собой массив элементов со следующей структурой: 

{hostName: "someHostName", pluginOutput: "someString", services: Array(8), currentState: "0"}

Спасибо

1 Ответ

0 голосов
/ 25 марта 2019

Хорошо, поэтому я решил эту проблему, реализовав собственную функцию сортировки при запуске события matSortChange, как в примере mat-sort-header.Но это странно, потому что им не нужно делать это в других примерах.

...