Building on my custom pipe and service, I have developed a system where an array of language abbreviations is passed to the pipe. The pipe then utilizes functions from the site based on these abbreviations. Here is the parameter being passed to the pipe:
pipe = ["be", "bg", "cs", "da", "de", "el", "en"]This represents the pipe in action.
transform(value: any[], kind: string): Observable<string | any>{
this.customTranslateService.getSortedTranslation(value, kind).subscribe(val => console.log("pipe", val));
return this.customTranslateService.getSortedTranslation(value, kind);
}
Now let's take a look at my service.
getSortedTranslation(value: any[], kind: string): Observable<string | any> {
return this.translateService.get(value.map(lang => `gen.glo.lang.${lang}`))
.pipe(
switchMap(result => of(Object.entries(result).sort((a, b) => (a > b) ? 1 : -1).reduce((object, [k, v]) => {
object['key']=k.split(".").pop();
object['value']=v;
return object;
}, {}))),
);
}
The expected return object format should be: {key: "en", value: "English"}
However, there seems to be an issue with my code as the service only returns the last item. This results in an error being thrown by the application:
LanguageSelectionDialogComponent.html:15 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Upon logging information in the pipe using console.log, it appears that all elements are processed but only the last one actually reaches the HTML file. I am seeking assistance in identifying the root cause of this problem and possibly finding a solution example.