angular - RxJs 运算符、forkJoin 在 Angular 11 中显示超过 6 个参数的错误

Question

在我的 Angular 形式中，我有一些集合类型属性。属性如下:

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

现在我已经使用 forkJoin 运算符调用服务来用数据填充上述属性。但似乎每当我在 forkJoin 运算符中放入超过 6 个不同类型的参数时，该运算符就会显示错误。下面是代码

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

它显示以下错误。

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

Answer 1

我认为您可以使用 forkJoin 的另一种重载来实现这一点，因为您使用的重载要求可观察数组项来自同一类型。

以下重载应该有效:

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