我使用带有 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 上不太熟悉.我很感激你的帮助.

推荐答案

每次应用筛选器时,它都会触发onFilter方法,该方法又会再次调用getMovements,从而导致无限循环.

防止这种情况的一种方法是在发出请求之前判断筛选器是否已实际更改.您可以通过存储以前的筛选器并将它们与新筛选器进行比较来实现这一点.

export class MovementsListComponent implements OnInit {
    movements: Movement[] = [];
    previousFilters: any = {};

    // ... other methods ...

    onFilter(event: TableFilterEvent) {
        console.log("onFilter....");

        // Check if the filters have changed
        if (JSON.stringify(event.filters) !== JSON.stringify(this.previousFilters)) {
            this.previousFilters = event.filters;

            this.movementsService.getMovements(event.filters).pipe(take(1)).subscribe(data => {
                this.movements = data;
            });
        }
    }
}

Angular相关问答推荐

升级到angular 17并转换为独立的加载器拦截器后,

Angular Signal只指一种类型,但这里用作值.ts(2693)''

导致无限请求的Angular HttpInterceptor和HttpClientModule

判断哪个Angular 信号导致了影响

对Angular 为17的路径使用AuthGuard

Angular 单位测试表

Angular-每2个流式传输多个HTTP调用

Angular *ngIf 表达式中这么多冒号的作用是什么?

从组件调用时服务中的 AddTodo 方法不起作用

无法在 Angular 中使用 CryptoJS 正确加密

使用 BehaviorSubject 从服务更新 Angular 组件

Angular模板错误:Property does not exist on type component

在 angular2 中,如何获取在为 @Input 发送的对象上更改的属性的 onChanges

如何在不刷新整页的情况下更新组件

Angular 4 - 在下拉列表中 Select 默认值 [Reactive Forms]

Angular 2 组件不是任何 NgModule 的一部分

在 Angular 2 中使用 store (ngrx) 有什么好处

Angular 2 Material 2 日期 Select 器日期格式

CustomPipe 没有提供者

如何在 Angular CLI 的构建时插入内部版本号或时间戳