Блог

Я пытаюсь внедрить фильтрацию на стороне сервера в свою угловую таблицу. Для этого я добавил некоторые формы, которые заполняют свойства этого компонента с помощью ngModel:

 @Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['../sequences.component.css']
})
export class FormComponent implements OnInit {

  constructor() { }

  panelOpenState = false;
  formGroup!: FormGroup;

/*These are the properties that get updated as the user writes in the forms*/
  sequenceId!: string;
  asOrigin!: number;
  public prefix!: string;
  suffix!: number;
  collectorIp!: string;
  collectorAsn!: string;
  durationGreater!: number;
  durationSmaller!: number;
  startDate!: Date;
  endDate!: Date;
  updates!: number;
  withdraws!: number;
  announces!: number;

  @ViewChild('input') input!: ElementRef;
  ngOnInit(): void {
    this.formGroup = new FormGroup({
      sequenceId: new FormControl(null, [Validators.pattern('[0-9a-fA-F]{24}')]),
      prefix: new FormControl(null/*, [Validators.pattern('[a-z0-9.:]{,20}((::)|.)/[0-9]{2}')]*/),
      collectorPeerIp: new FormControl(null, [Validators.pattern('[a-z0-9]{5,}')]),
      asOrigin: new FormControl(null),
      suffix: new FormControl(null),
      collectorAsn: new FormControl(null),
      durationGreater: new FormControl(null),
      durationSmaller: new FormControl(null),
      startDate: new FormControl(null),
      endDate: new FormControl(null),
      updates: new FormControl(null),
      withdraws: new FormControl(null),
      announces: new FormControl(null),
    });
  }
 

В моем основном компоненте я получил функцию FromEvent, которая вызывает функцию loadSequences, когда что-то вводится в формы

   datiForm!: FormComponent;

  ngAfterViewInit() {
    this.paginator.page.subscribe(x => this.loadSequences());
    this.loadSequences();
    this.dataSource.length.subscribe(x => this.paginator.length = x);
    fromEvent(this.input.nativeElement, 'keyup')
    .pipe(
        debounceTime(150),
        distinctUntilChanged(),
        tap(() => {
            this.paginator.pageIndex = 0;
            this.loadSequences();
        })
    )
    .subscribe();
  }

  loadSequences(): void{
    this.dataSource.loadSequences(this.paginator.pageIndex   1, this.paginator.pageSize, '00', this.datiForm);
  }
 

Эта функция определена в классе источника данных и определяет, что отображается в таблице данных.

 loadSequences(pageIndex: number,
                  pageSize: number,
                  rrc: string,
                  datiForm: FormComponent) {

        this.loadingSubject.next(true);

        this.sequencesService.findSequences(pageIndex, pageSize, rrc, datiForm).pipe(
                finalize(() => this.loadingSubject.next(false)),
                tap(x => this.length.next(x.total))
            )
            .subscribe((sequences: PaginatedResult) => {
            this.sequencesSubject.next(sequences.items);
        });
    }
 

It calls the function findSequences which is the one i’m working on. I’m trying to make it so that when the FormComponent’s properties have a certain value, it sends http requests to certain URLs. This URLs should use the properties as parameters but for now i’m just trying to make sure that the FormComponent’s values are actually read by the service. Here’s the service with an attempt I made with the prefix property:

 @Injectable({
  providedIn: 'root'
})
export class SequencesService {

  constructor(private http: HttpClient) { }

   findSequences(pageIndex: number, pageSize: number, rrc: string, datiForm: FormComponent): Observable<PaginatedResult> {
        if (datiForm.prefix === '2a0d:8d80::/32'){
          return this.http.get<PaginatedResult>('https://bgpie.net/api/rrc/00/sequence?limit=20amp;page=1amp;prefix=2a0d:8d80::/32')
        }
        else{
        return this.http.get<PaginatedResult>('https://bgpie.net/api/rrc/'   rrc   '/sequence', {
            params: new HttpParams()
                .set('page', pageIndex.toString())
                .set('limit', pageSize.toString())
        });
      }
    }
 

With the function set up like this, the table is sent into an endless loading process and no data ever gets shown.