RxJs operator, forkJoin shows error with more than 6 parameters in Angular 11

Issue

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]; ~~~~~~~~~~~~~~

Solution

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;
});

Answered By - Amer