Angular: Предварительная загрузка данных таблицы дерева из сообщения Http

Question

Эй, я хочу предварительно загрузить данные структуры древовидной таблицы после загрузки компонента, а затем отфильтровать данные на основе формы (поле ввода и раскрывающийся список).Оба имеют один и тот же HTTP-пост-вызов для бэкенда из класса обслуживания.

Итак, сначала он предварительно загрузит данные с пустыми параметрами и загрузит все данные, а затем на основе формы отфильтрует и загрузит данные.

Класс компонентов

  import {Component, OnInit} from "@angular/core";
import {FormControl, FormGroup} from "@angular/forms";
import {SignaalFilterJsonSchema} from "../../../models/signalen/signaal-filter";
import {OverzichtSignalService} from "../service/overzicht-signal.service";
import {SignalenBrinJsonSchema} from "../../../models/signalen/signalen-brin";



@Component({
  selector: 'overzicht-signalen',
  templateUrl: './overzicht-signal.component.html',
  styleUrls : ['./overzicht-signal.component.css']
})



export class OverzichtSignalenComponent implements OnInit{
  signals: any [] ;
  jaren: any[];
  types: any[];
  signalFilters :SignalenBrinJsonSchema[]
  selectieForm: FormGroup
  filterSignaal: SignaalFilterJsonSchema={}
  // listFilterBrin:string
  // listFiltervestiging:string


  constructor(private signalService: OverzichtSignalService )
{
}
  ngOnInit() {

    this.signals = [
      {code:"1", label:"1 niet ingeschreven op teldatum"},
      {code:"2", label:"2 geen toestemming voor opleiding"},
      {code:"3", label:"3 vestiging niet in bedrijf"},
      {code:"4", label:"4 leerjaar niet toegestaan"},
      {code:"5", label:"5 te oud voor praktijkonderwijs"},
      {code:"6", label:"7 Dubbele inschrijving, niet bekostigd"},
      {code:"7", label:"8 Dubbele inschrijving, wel bekostigd"},
      {code:"8", label:"9 Indicatie bekostigbaar niet gezet"},
      {code:"9", label:"10 Geen regulier omdat categorie 1 nieuwkomer"},
      {code:"10",label:"11 LWOO/PRO niet toegestaan"},
      {code:"11",label:"12 Ambtshalve vaststelling"},
      {code:"12",label:"13 Ambtshalve vaststelling verwijderd"}
    ];
    this.jaren =[
      {code:"1", label:"2019"},
      {code:"2", label:"2018"}
    ];

    this.types=[
      {code:"1", label:"Alle"},
      {code:"2", label:"Regulier"},
      {code:"3", label:"Nieuwkomer"}
    ];

    this.selectieForm = new FormGroup({
      identificatieBrin: new FormControl(""),
      identificatieVestiging: new FormControl(""),
      identificatieSelectieSignals: new FormControl(""),
      identificatieSelectieJaar: new FormControl(""),
      identificatieSelectieSoort: new FormControl("")
    });

    this.signalService.getSignalenBrins(this.filterSignaal).subscribe(x=>{
      this.signalFilters=x;
    });
    //this.onIdentificatieSelectieChange()
    this.selectieForm.valueChanges.subscribe(x => this.onIdentificatieSelectieChange())
  }


  onIdentificatieSelectieChange() {

    const brins = this.selectieForm.controls.identificatieBrin.value;
    const vestiging = this.selectieForm.controls.identificatieVestiging.value;
    const signals =  this.selectieForm.controls.identificatieSelectieSignals.value;
    const jaar =  this.selectieForm.controls.identificatieSelectieJaar.value;
    const soort = this.selectieForm.controls.identificatieSelectieSoort.value;

    const changeFilterSignaal: SignaalFilterJsonSchema ={
      brin : brins,
      vestiging : vestiging,
      signaalCode: signals,
      bekostigingsjaar: jaar,
      soortTeldatum: soort
    };

    this.signalService.getSignalenBrins(changeFilterSignaal).subscribe(x => {
      this.signalFilters =x;
    });
  }

}

HTML:

<header class="row">
  <div class="col-lg-10 col-lg-offset-1">
    <div class="content content--header">
              <h1>Overzicht Signalen</h1>
    </div>
  </div>
</header>
    <article>
      <form    id="selectieFrm" name="selectieFrm"  (ngSubmit)="onSubmit()" [formGroup]="selectieForm">
      <div class="row">
        <div class="col-md-12">
          <div class="content-background">
            <div class="content">

              <div class="row">
                <div class="col-md-2">
                  <div class="input">
                    <input type='text' placeholder="BRINNaam" formControlName="identificatieBrin" class="input_control input_control--text input_control--validate input_control--large">
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="input">
                    <input type="text" placeholder="Vestiging" formControlName="identificatieVestiging" class="input_control input_control--text input_control--validate input_control--large">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="input">
                    <select id="signalType"  class="input_control input_control--m  input_control--select" formControlName="identificatieSelectieSignals">
                      <option value="" disabled hidden>Choose Signal </option>
                      <option  *ngFor="let signal of signals" [value]="signal.code">{{signal.label}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-2" >
                  <div class="input">
                    <select id="jaar" class="input_control input_control--m  input_control--select " formControlName="identificatieSelectieJaar">
                      <option value="" disabled hidden>Choose BeKostiging Jaar </option>
                      <option [value]="jaar.code" *ngFor="let jaar of jaren">{{jaar.label}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-2" >
                  <div class="input">
                    <select id="teldatumsoort" class="input_control input_control--m  input_control--select" formControlName="identificatieSelectieSoort">
                      <option value="" disabled hidden>Choose Teldatum Soort </option>
                      <option [value]="type.code" *ngFor="let type of types">{{type.label}}</option>
                    </select>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      </form>
        <collapsible-brin-vestiging [signalFilter]="signalFilters"></collapsible-brin-vestiging>
    </article>

SignaalFilterJsonSchema:

export interface SignaalFilterJsonSchema {

  brin?: string;

  vestiging?: string;

  signaalCode?: string;

  bekostigingsjaar?: number;

  soortTeldatum?: string;
  }

Как мне прогрессировать в этом случае?