映射不正确的值

Question

我正在尝试将多个可观察物映射到一个可观察的可观察使用rxjs combineLatest。当我试图映射6个可观测值时，这先前是在工作，但是当添加一个5时，编译器似乎对映射感到困惑。这是所讨论的逻辑：

interface ReferenceData {
    observableOne: ArrOne[];
    observableTwo: ArrTwo[];
    observableThree: ArrThree[];
    observableFour: ArrFour[];
    observableFive: ArrFive[];
    observableSix: ArrSix[];
    observableSeven: ArrSeven[];
    observableEight: ArrEight[];
    observableNine: ArrNine[];
    observableTen: ArrTen[];
    observableEleven: ArrEleven[];
}

export class ReviewComponent extends BaseComponent implements OnInit, AfterViewInit {

 observableOne$: Observable<ArrOne[]>;
 observableTwo$: Observable<ArrTwo[]>;
 observableThree$: Observable<ArrThree[]>;
 observableFour$: Observable<ArrFour[]>;
 observableFive$: Observable<ArrFive[]>;
 observableSix$: Observable<ArrSix[]>;
 observableSeven$: Observable<ArrSeven[]>;
 observableEight$: Observable<ArrEight[]>;
 observableNine$: Observable<ArrNine[]>;
 observableTen$: Observable<ArrTen[]>;
 observableEleven$: Observable<ArrEleven[]>;

 referenceData$: Observable<ReferenceData>;

  ngOnInit(): void {
        this.getReferenceData();
        this.createSingleReferenceDataObservable();
    }

  getReferenceData() {
        this.observableOne$ = this.entityService.get('TestDataOne');
        this.observableTwo$ = this.entityService.get('TestDataTwo');
        this.observableThree$ = this.entityService.get('TestDataThree');
        this.observableFour$ = this.entityService.get('TestDataFour');
        this.observableFive$ = this.entityService.get('TestDataFive');
        this.observableSix$ = this.entityService.get('TestDataSix');
        this.observableSeven$ = this.entityService.get('TestDataSeven');
        this.observableEight$ = this.entityService.get('TestDataEight');
        this.observableNine$ = this.entityService.get('TestDataNine');
        this.observableTen$ = this.entityService.get('TestDataTen');
        this.observableEleven$ = this.entityService.get('TestDataEleven');
   }

    createSingleReferenceDataObservable() {
            this.referenceData$ = combineLatest([
                this.observableOne$, 
                this.observableTwo$, 
                this.observableThree$, 
                this.observableFour$, 
                this.observableFive$, 
                this.observableSix$, 
                this.observableSeven$, 
                this.observableEight$, 
                this.observableNine$, 
                this.observableTen$, 
                this.observableEleven$
            ])
            .pipe(
                map(([
                    ArrOne, 
                    ArrTwo, 
                    ArrThree, 
                    ArrFour, 
                    ArrFive, 
                    ArrSix, 
                    ArrSeven, 
                    ArrEight, 
                    ArrNine, 
                    ArrTen, 
                    ArrEleven
                ]) => {
                    return {
                        ArrOne, 
                        ArrTwo, 
                        ArrThree, 
                        ArrFour, 
                        ArrFive, 
                        ArrSix, 
                        ArrSeven, 
                        ArrEight, 
                        ArrNine, 
                        ArrTen, 
                        ArrEleven
                    }
                })
            );
        }
    
    }

编译器给出以下错误：

键入'可观察＆lt; {arrone：arrone []; arrtwo：arrone []; arrthree： arrone []; arrfour：arrone []; arrfive：arrone []; arrsix：arrone []; arrseven：arrone []; Arreight：Arrone []; arrnine：arrone []; arrten： arrone [];到达：arrone []; }＆gt;'不能分配给类型 “可观察”。键入'{arrone：arrone []; arrtwo： arrone []; arrthree：arrone []; arrfour：arrone []; arrfive：arrone []; arrsix：arrone []; arrseven：arrone []; Arreight：Arrone []; arrnine： arrone []; arrten：arrone [];到达：arrone []; }'缺少 以下来自类型为“ ReferenceData”的属性：可观察酮， observabletwo，observablethree，observablefour和7个。

这很奇怪，因为如果我将可观察值的数量减少到六个，然后从referenceedata接口中删除相应的值，则编译器不会丢弃此错误。

有什么想法吗？

Answer 1

RXJS CombineLatest还具有另一个超载，您可以在对象中传递，这将使您也可以跳过MAP：

        this.referenceData$ = combineLatest({
            ArrOne: this.observableOne$, 
            ArrTwo: this.observableTwo$, 
            ArrThree: this.observableThree$, 
            ArrFour: this.observableFour$, 
            ArrFive: this.observableFive$, 
            ArrSix: this.observableSix$, 
            ArrSeven: this.observableSeven$, 
            ArrEight: this.observableEight$, 
            ArrNine: this.observableNine$, 
            ArrTen: this.observableTen$, 
            ArrEleven: this.observableEleven$
        });

也许这效果更好。它可能是一个数组不起作用，因为TS可能对可以从元组推断的值有限制。

Answer 2

[
                    ArrOne, 
                    ArrTwo, 
                    ArrThree, 
                    ArrFour, 
                    ArrFive, 
                    ArrSix, 
                    ArrSeven, 
                    ArrEight, 
                    ArrNine, 
                    ArrTen, 
                    ArrEleven
                ]

this is an array of type `ArrOne[] | ArrTwo[] | ArrThree[] | ArrFour[] | ArrFive[] | ArrSix[] | ArrSeven[] | ArrEight[] | ArrNine[]` and you cannot just say that `Apple | Pear` is `Apple` only the other way round.

So you need to:

    return {
                        ArrOne as ArrOne[], 
                        ArrTwo as ArrTwo[],  
                        ...
                    }

Answer 3

您可以在错误msg的末尾找到解决方案

缺少“参考”类型的以下属性：可观察酮，observableTwo，observablethree，observableFour等。

问题在于，在referendedata中，您将适当名称定义为observableOne，observableTwo，...，

interface ReferenceData {
    observableOne: ArrOne[];
    observableTwo: ArrTwo[];
    ...
}

但是在地图中，您正在返回一个对象，其中包含属性为的属性。 arrone，arrtwo，...

因此，您要么更改映射函数，因此返回的属性名称与接口匹配。

.pipe( 
  map(([observableOne, observableTwo,...]) => 
    ({observableOne, observableTwo,...})
  )
)

的对象参数签名

this.referenceData$ = combineLatest({
  observableOne: this.observableOne$, 
  observableTwo: this.observableTwo$,
  ...
});
                    

或者您直接使用combineLatest欢呼