Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

460
Visualizações
RxJs operator, forkJoin shows error with more than 6 parameters in Angular 11

In my angular form I have some collection type properties. The properties are given below:

countries: CountryInfo[] = [];
floorLists: VariableInfo[] = [];
memberTypes: VariableInfo[] = [];
memberCategories: VariableInfo[] = [];
businessTypes: VariableInfo[] = [];
voterRelations: VariableInfo[] = [];
bloodGroups: VariableInfo[] = [];
designations: VariableInfo[] = [];

Now I have used forkJoin operator to call service to populate the above properties with data. But it seems that whenever I put more than 6 parameters in forkJoin operator with different types, the operator shows an error. Below is the code

let countries$ = this.countryService.getCountryLists();
let floors$ = this.variableService.getFloorLists();
let memberTypes$ = this.variableService.getMemberTypeLists();
let categories$ = this.variableService.getMemberCategoryLists();
let businessTypes$ = this.variableService.getBusinessTypeLists();
let voterRelations$ = this.variableService.getVoterRelationLists();
let bloodGroups$ = this.variableService.getBloodGroupLists();
let designations$ = this.variableService.getDesignations();

forkJoin([countries$, floors$, memberTypes$, categories$, businessTypes$, voterRelations$, bloodGroups$, designations$]).subscribe(data => {
    this.countries = data[0];
    this.floorLists = data[1];
    this.memberTypes = data[2];
    this.memberCategories = data[3];
    this.businessTypes = data[4];
    this.voterRelations = data[5];
    this.bloodGroups = data[6];
    this.designations = data[7];
});

It shows the below errors.

TS2322: Type 'CountryInfo[] | VariableInfo[]' is not assignable to type 'CountryInfo[]'. Type 'VariableInfo[]' is not assignable to type 'CountryInfo[]'. Type 'VariableInfo' is missing the following properties from type 'CountryInfo': Name, Flag, Code

217 this.countries = data[0]; ~~~~~~~~~~~~~~

enter image description here

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

This is because data inside subscribe() is of type Array<CountryInfo[] | VariableInfo[]>. So referring to the array with the index data[i] infers the type CountryInfo[] | VariableInfo[], hence the error.

You can use array destructuring to have more specific types, which should fix the error.

forkJoin([countries$, floors$, memberTypes$, categories$, businessTypes$, voterRelations$, bloodGroups$, designations$])
.subscribe(([countries, floors, memberTypes, categories, businessTypes, voterRelations, bloodGroups, designations]) => {
    this.countries = countries;
    this.floorLists = floors;
    this.memberTypes = memberTypes;
    this.memberCategories = categories;
    this.businessTypes = businessTypes;
    this.voterRelations = voterRelations;
    this.bloodGroups = bloodGroups;
    this.designations = designations;
});
over 4 years ago · Santiago Trujillo Relatório

0

I think you can achieve that using another overload of the forkJoin, because the one you're using requires the observable array items to be from the same type.

The following overload should works:

forkJoin({
  countries: countries$,
  floors: floors$,
  memberTypes: memberTypes$,
  categories: categories$,
  businessTypes: businessTypes$,
  voterRelations: voterRelations$,
  bloodGroups: bloodGroups$,
  designations: designations$,
}).subscribe((data) => {
  this.countries = data.countries;
  this.floorLists = data.floors;
  this.memberTypes = data.memberTypes;
  this.memberCategories = data.categories;
  this.businessTypes = data.businessTypes;
  this.voterRelations = data.voterRelations;
  this.bloodGroups = data.bloodGroups;
  this.designations = data.designations;
});
over 4 years ago · Santiago Trujillo Relatório

0

ForkJoin with a Dictionary instead of an Array

Positional arguement in an array are fairly error-prone. ForkJoin lets you solve this problem and the problem with types in one fell swoop. As long as the keys match, you can re-order the inputs without fear. It also stops you from re-typing the names over and over and over again.

forkJoin({
  countries: this.countryService.getCountryLists(),
  floorLists: this.variableService.getFloorLists(),
  memberTypes: this.variableService.getMemberTypeLists(),
  memberCategories: this.variableService.getMemberCategoryLists(),
  businessTypes: this.variableService.getBusinessTypeLists(),
  voterRelations: this.variableService.getVoterRelationLists(),
  bloodGroups: this.variableService.getBloodGroupLists(),
  designations: this.variableService.getDesignations()
}).subscribe(data => {
  for (const [key, value] of Object.entries(data)) {
    this[key] = value;
  }
});

Of course, the obj here can be pulled out of the forkjoin and built (incrementally or otherwise) elsewhere. In this case make sure you type "callListType" properly somewhere so your code knows what to expect (Is voterRelations an optional field are there numerous types at play?)

let callList: callListType =  {
  countries: this.countryService.getCountryLists(),
  floorLists: this.variableService.getFloorLists(),
  memberTypes: this.variableService.getMemberTypeLists(),
  memberCategories: this.variableService.getMemberCategoryLists(),
  businessTypes: this.variableService.getBusinessTypeLists()
}
callList = {...callList, voterRelations: this.variableService.getVoterRelationLists()};
callList.bloodGroups = this.variableService.getBloodGroupLists();
callList["designations"] = this.variableService.getDesignations();

forkJoin(callList).subscribe(data => {
  for (const [key, value] of Object.entries(data)) {
    this[key] = value;
  }
});
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda