Заполнение таблицы Mat (и выполнение сортировки и фильтрации) с использованием JSON Response - PullRequest
Новая
       23

Заполнение таблицы Mat (и выполнение сортировки и фильтрации) с использованием JSON Response

2 голосов
/ 17 апреля 2019

Я новичок в Angular 7 и работаю над таблицей Angular Mat для отображения ответа от внутреннего сервера и выполнения сортировки, фильтрации и разбивки на страницы данных.

Разбивка на страницы работает должным образом, но сортировка и фильтрация не работают должным образом. Я также импортировал все необходимые модули. Может ли кто-нибудь помочь мне с этим?

Joblist.component.ts 

import { Component ,ViewChild, OnInit ,AfterViewInit} from '@angular/core';
import { MatTableDataSource,MatPaginator,MatSort,Sort} from '@angular/material';
import { BackupService } from '../backup.service';

export interface jobs{
  status : string

}

@Component({
    templateUrl :'joblist.component.html',
    styleUrls :['joblist.component.css']
})

export class JoblistComponent  implements OnInit,AfterViewInit{
  public displayedColumns = ['status'];
  public dataSource = new MatTableDataSource<jobs>();


  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private backupService: BackupService) { }

    ngOnInit()
    {
       this.getAllJobs(); 
    }

    ngAfterViewInit(): void {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }

    public doFilter = (value: string) => {
      this.dataSource.filter = value.trim().toLocaleLowerCase();
    }

    getAllJobs() {
      this.backupService.getJobs(
        response => {
          console.log("response =>"+response);    
          this.dataSource.data = response.jobs as jobs[];
          console.log("datasource =>"+this.dataSource);
        },
        error => {
          console.log("error=>", error);
        });
    }

joblist.component.html 

<div fxLayout fxLayoutAlign="center center">
  <mat-form-field fxFlex="40%">
    <input matInput type="text" (keyup)="doFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>
<div class="mat-elevation-z8">
<mat-paginator [pageSizeOptions]="[5, 10, 20,50,100]" showFirstLastButtons></mat-paginator>
<table mat-table [dataSource]="dataSource" matSort >
  <ng-container matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
    <td mat-cell *matCellDef="let element"> {{element.jobSummary.status}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

Ответ от внутреннего сервера 

{
    "jobs": [
        {
            "jobSummary": {
                "status": "full"
            }
        },
        {
            "jobSummary": {
                "status": "completed"
            }
        },
        {
            "jobSummary": {
                "status": "partial"
            }
        }
    ]
}

Поиск и сортировка не работают с ответом.

1 Ответ

1 голос
/ 18 апреля 2019

Я думаю, что это может быть проблема инициализации источника данных. 

import { Component ,ViewChild ,AfterViewInit} from '@angular/core';
import { MatTableDataSource,MatPaginator,MatSort,Sort} from '@angular/material';
import { BackupService } from '../backup.service';

export interface jobs{
  status : string

}

@Component({
    templateUrl :'joblist.component.html',
    styleUrls :['joblist.component.css']
})

export class JoblistComponent  implements AfterViewInit{
  public displayedColumns = ['status'];
  public dataSource: MatTableDataSource;


  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private backupService: BackupService) { }

    onTableDataReceived(data: any[]) {
      this.dataSource = new MatTableDataSource(data);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }

    ngAfterViewInit(): void {
      this.getAllJobs(); 
    }

    public doFilter = (value: string) => {
      this.dataSource.filter = value.trim().toLocaleLowerCase();
    }

    getAllJobs() {
      this.backupService.getJobs(
        response => {
          console.log("response =>"+response);    
          const data = response.jobs as jobs[];
          this.onTableDataReceived(data);
        },
        error => {
          console.log("error=>", error);
        });
    }
...