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

Question

在我的角度形式中，我有一些集合类型属性。属性如下：

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：键入“CountryInfo[] | VariableInfo[]' 不可分配给 键入“国家信息 []”。类型“VariableInfo[]”不可分配给 键入“国家信息 []”。 “VariableInfo”类型缺少“CountryInfo”类型的以下属性：名称、标志、代码

217 this.countries = 数据[0]; ~~~~~~~~~~~~~~~~~

Answer 1

这是因为subscribe() 中的data 是Array<CountryInfo[] | VariableInfo[]> 类型。因此引用索引为data[i] 的数组会推断出类型CountryInfo[] | VariableInfo[]，因此会出现错误。

您可以使用数组解构来获得更具体的类型，这应该可以修复错误。

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

Answer 2

我认为您可以使用 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;
});

Answer 3

ForkJoin 使用字典而不是数组

数组中的位置争论相当容易出错。 ForkJoin 让您一举解决和类型问题。只要键匹配，您就可以重新排序输入而不必担心。它还可以阻止您一遍又一遍地重新输入名称。

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

当然，这里的 obj 可以从 forkjoin 中拉出并在其他地方（增量或其他方式）构建。在这种情况下，请确保您在某处正确键入“callListType”，以便您的代码知道会发生什么（voterRelations 是可选字段吗？有很多类型在起作用吗？）

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