我使用带有 Big Data 的原始表.为此,我将我的过滤器发送到REST后端,并在我的表中显示结果.但每个筛选器操作都以循环结束.
以下是我的服务:
public getMovements(filters?: any): Observable<Movement[]> {
let uri = this.baseUrl + '?q=' + encodeURIComponent(JSON.stringify(filters));
return this.httpClient.get<Movement[]>(this.baseUrl, this.httpOptions).pipe(
map((result: any) => {
return result._embedded.movements;
}));
}
以及组件的html代码.当我输入制造商名称并按Enter键进行筛选时,循环开始:
<p-table #dt [value]="movements" [paginator]="true" [rows]="50" [showCurrentPageReport]="true" responsiveLayout="scroll" currentPageReportTemplate="Zeige {first} bis {last} von {totalRecords} Einträgen" [rowsPerPageOptions]="[10,25,50]" styleClass="p-datatable-striped"
[rowHover]="true" (onFilter)="onFilter($event)" [globalFilterFields]="['inventory_category_name', 'manufacturer_name', 'inventory_no', 'user_display_name', 'inventory_status_name']">
<ng-template pTemplate="caption">
<div class="flex flex-wrap gap-2 align-items-center justify-content-between">
<span class="p-input-icon-left w-full sm:w-20rem flex-order-1 sm:flex-order-0">
<i class="pi pi-search"></i>
<input pInputText type="text" (input)="onGlobalFilter(dt, $event)" placeholder="Globale Suche" class="w-full" />
</span>
<button [routerLink]="'/inventories/movements/edit'" pButton class="p-button-outlined w-full sm:w-auto flex-order-0 sm:flex-order-1" icon="pi pi-user-plus" label="Neu"></button>
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="inventory_category_name">Movement
<p-sortIcon field="inventory_category_name"></p-sortIcon>
</th>
<th pSortableColumn="manufacturer_name">Modell
<p-sortIcon field="manufacturer_name"></p-sortIcon>
</th>
<th pSortableColumn="inventory_no">Inventar-Nr.
<p-sortIcon field="inventory_no"></p-sortIcon>
</th>
<th pSortableColumn="user_display_name">Mitglied
<p-sortIcon field="user_display_name"></p-sortIcon>
</th>
<th pSortableColumn="inventory_status_name">Status
<p-sortIcon field="inventory_status_name"></p-sortIcon>
</th>
<th pSortableColumn="edit_time" class="text-right">Bearbeitung
<p-sortIcon field="edit_time"></p-sortIcon>
</th>
</tr>
<tr>
<th>
<p-columnFilter type="text" field="inventory_category_name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="manufacturer_name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="inventory_no"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="user_display_name"></p-columnFilter>
</th>
<th>
<p-columnFilter type="text" field="inventory_status_name"></p-columnFilter>
</th>
<th class="text-right">
<p-columnFilter type="text" field="editor_display_name"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-movement>
<tr>
<td>{{ movement.inventory_category_name }}</td>
<td>{{ movement.manufacturer_name }} {{ movement.inventory_movement_name }}</td>
<td>{{ movement.inventory_no }} {{ movement.inventory_name }}</td>
<td>{{ movement.user_display_name }}</td>
<td>{{ movement.inventory_status_name }}</td>
<td class="text-right">{{ movement.editor_display_name }} {{ movement.edit_time | date: 'dd.MM.yyyy HH:mm'}}</td>
</tr>
</ng-template>
</p-table>
以及组件的代码本身:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Table, TableFilterEvent} from 'primeng/table';
import { Movement } from '../../../api/movement'
import { MovementsService } from '../../../service/movements.service';
import { ConfirmationService, MessageService } from 'primeng/api';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { Subject, take } from 'rxjs';
@Component({
templateUrl: './movementslist.component.html',
providers: [ConfirmationService, MessageService]
})
export class MovementsListComponent implements OnInit {
movements: Movement[] = [];
constructor(
private movementsService: MovementsService,
private router: Router,
private messageService: MessageService,
private confirmationService: ConfirmationService,
) { }
ngOnInit() {
}
onSelect(inventory_movement_id?: number) {
this.router.navigate(["/inventories/movements/edit", inventory_movement_id]);
}
onGlobalFilter(table: Table, event: Event) {
//not impemented yet
}
onFilter(event: TableFilterEvent) {
// Here is the loop section ...
console.log("onFIlter....");
this.movementsService.getMovements(event.filters).pipe(take(1)).subscribe(data => {
this.movements = data;
});
}
}
我认为这个问题与观察者有关.我对观察者-订阅者原则在Angular 上不太熟悉.我很感激你的帮助.