0
462
VistasOperador RxJs, forkJoin muestra error con más de 6 parámetros en Angular 11
En mi forma angular tengo algunas propiedades de tipo colección. Las propiedades se dan a continuación:
countries: CountryInfo[] = []; floorLists: VariableInfo[] = []; memberTypes: VariableInfo[] = []; memberCategories: VariableInfo[] = []; businessTypes: VariableInfo[] = []; voterRelations: VariableInfo[] = []; bloodGroups: VariableInfo[] = []; designations: VariableInfo[] = [];Ahora he usado el operador forkJoin para llamar al servicio para completar las propiedades anteriores con datos. Pero parece que cada vez que coloco más de 6 parámetros en el operador forkJoin con diferentes tipos , el operador muestra un error. A continuación se muestra el código
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]; });Muestra los siguientes errores.
TS2322: Escriba 'CountryInfo[] | VariableInfo[]' no se puede asignar al tipo 'CountryInfo[]'. El tipo 'VariableInfo[]' no se puede asignar al tipo 'CountryInfo[]'. Al tipo 'VariableInfo' le faltan las siguientes propiedades del tipo 'CountryInfo': nombre, bandera, código
217 este.países = datos[0]; ~~~~~~~~~~~~~~
3 Respuestas
Responde la pregunta0
Esto se debe a que data dentro de subscribe() son del tipo Array<CountryInfo[] | VariableInfo[]> . Entonces, referirse a la matriz con los data[i] infiere el tipo CountryInfo[] | VariableInfo[] , de ahí el error.
Puede usar la desestructuración de matrices para tener tipos más específicos, lo que debería corregir el 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; });0
Creo que puede lograrlo usando otra sobrecarga de forkJoin , porque el que está usando requiere que los elementos de matriz observables sean del mismo tipo.
La siguiente sobrecarga debería funcionar:
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; });0
ForkJoin con un diccionario en lugar de una matriz
Los argumentos posicionales en una matriz son bastante propensos a errores. ForkJoin le permite resolver este problema y el problema con los tipos de una sola vez. Siempre que las claves coincidan, puede reordenar las entradas sin miedo. También evita que vuelva a escribir los nombres una y otra vez.
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; } });Por supuesto, el obj aquí se puede sacar de la bifurcación y construir (incrementalmente o de otra manera) en otro lugar. En este caso, asegúrese de escribir "callListType" correctamente en algún lugar para que su código sepa qué esperar (¿Relaciones de votantes es un campo opcional, hay numerosos tipos en juego?)
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; } });