Я создал приложение Angular, используя PrimeNG Table.Я проверил документацию PrimeNG здесь (https://www.primefaces.org/primeng/#/table/sort). Проблема в том, что моя таблица не сортируется. Отображаются значки сортировки, и когда я нажимаю на любую из них, анимация меняется, но данные не отображаются.отсортировано.
Вот мой код для component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DownloadService } from '../services/download/download.service';
import { SelectItem, MultiSelectModule } from "primeng/primeng";
@Component({
selector: 'app-downloads',
templateUrl: './downloads.component.html',
styleUrls: ['./downloads.component.css'],
providers: [DownloadService]
})
export class DownloadsComponent implements OnInit {
downloadData: any[] = [];
cols: any[];
columnOptions: SelectItem[];
constructor(private http: HttpClient, private data: DownloadService) { }
ngOnInit() {
this.getData();
setInterval(() => {
this.getData();
}, 5000);
}
getData() {
this.data.GetDownloads().subscribe(data => {
this.downloadData = data;
});
}
}
и код для component.html
<p-table [value]="downloadData" [rows]="10" [paginator]="true" sortMode="multiple" [rowsPerPageOptions]="[5,10,20]" [rowHover]="true">
<ng-template pTemplate="header">
<tr>
<th style="text-align: center;" [pSortableColumn]="'Logger Name'">Logger Name
<p-sortIcon [field]="'Logger Name'"></p-sortIcon>
</th>
<th style="text-align: center;" [pSortableColumn]="'Progress'">Progress
<p-sortIcon [field]="'Progress'"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-download>
<tr>
<td style="text-align: center;">{{ download.logger.name }}</td>
<td style="text-align: center;">
<p-progressBar [value]="download.progress"></p-progressBar>
</td>
</tr>
</ng-template>
</p-table>
![enter image description here](https://i.stack.imgur.com/5Oc9x.png)