У меня есть мой HTML-код, подобный этому:
<div class="mat-elevation-z8" *ngIf="Model">
<br>
<mat-form-field class="col-md-3 col-lg-3">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="StartTime">
<th mat-header-cell *matHeaderCellDef mat-sort-header> StartTime </th>
<td mat-cell *matCellDef="let row" style="width: 15%"> {{row.call_start_time | date:'dd-MM-yyyy HH:mm:ss'}} </td>
</ng-container>
<ng-container matColumnDef="Duration">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Duration </th>
<td mat-cell *matCellDef="let row"> {{row.call_total_duration}} </td>
</ng-container>
<ng-container matColumnDef="CallType">
<th mat-header-cell *matHeaderCellDef mat-sort-header> CallType </th>
<td mat-cell *matCellDef="let row" style="width: 5%"> {{row.call_type}} </td>
</ng-container>
<ng-container matColumnDef="CLI">
<th mat-header-cell *matHeaderCellDef mat-sort-header> CLI </th>
<td mat-cell *matCellDef="let row" style="width: 15%"> {{row.call_cli}} </td>
</ng-container>
<ng-container matColumnDef="Campaign">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Campaign </th>
<td mat-cell *matCellDef="let row" style="width: 20%"> {{row.call_service_name}} </td>
</ng-container>
<ng-container matColumnDef="Agent">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Agent </th>
<td mat-cell *matCellDef="let row"> {{row.call_agent_id}} </td>
</ng-container>
<ng-container matColumnDef="Disposition">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Disposition </th>
<td mat-cell *matCellDef="let row" style="width: 20%"> {{row.call_end_type_name}} </td>
</ng-container>
<ng-container matColumnDef="Remarks">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Remarks </th>
<td mat-cell *matCellDef="let row" style="width: 20%"> {{row.call_remark}} </td>
</ng-container>
<ng-container matColumnDef="TransfferedTo">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="width: 5%"> TransfferedTo </th>
<td mat-cell *matCellDef="let row" style="width: 5%"> {{row.call_child_callnumber}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5,10, 25]"></mat-paginator>
</div>
Вопрос, который я упоминал: сортировка по мату не работает на таблице матов
Я уже говорилнекоторые вопросы, но все они вызывают службу по ngOnInit (), но мне нужно вызвать службу по методу ngSubmit () в моем файле .ts.
Разбиение на страницы и сортировкане работает. Я полагаю, что есть проблема с моим файлом скрипта типа, и это выглядит так:
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
import { CampaignService } from 'services/campaign.service';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
export interface State {
Name: string;
Id: number;
}
@Component({
selector: 'app-logs',
templateUrl: './logs.component.html',
styleUrls: ['./logs.component.css']
})
export class LogsComponent implements OnInit {
dataSource: MatTableDataSource<any>;
displayedColumns: string[] = ['StartTime', 'Duration', 'CallType', 'CLI', 'Campaign' , 'Agent' , 'Disposition' , 'Remarks' , 'TransfferedTo'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private webService: CampaignService) {
}
FromDate: any;
ToDate: any;
Campaign: any;
Agent: any;
MobileNumber: any;
stateCtrl = new FormControl();
filteredStates: Observable<State[]>;
Model: any;
Data: any;
Result: any;
private _filterStates(value: string): State[] {
const filterValue = value.toLowerCase();
return this.Data.filter(state => state.Name.toLowerCase().indexOf(filterValue) === 0);
}
ngOnInit() {
//this.dataSource = new MatTableDataSource(this.Result);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
onSubmit(data) {
const deatails = JSON.stringify({
FromDate: FromDate,
ToDate: ToDate,
Campaign: this.Campaign,
Agent: data.Agent,
MobileNumber: data.MobileNumber
});
this.webService.CallDetails(deatails)
.subscribe(
response => {
this.Model = response;
this.Result = this.Model.log
this.dataSource = new MatTableDataSource( this.Result);
},
(error) => console.error(error)
);
}
}
Может кто-нибудь указать мне, где я иду не так?Большое спасибо заранее.