Question

我创建了管道和服务。管道会使用一系列语言缩写，然后从站点调用管道函数。这就是它作为参数传递给pipe = ["be", "bg", "cs", "da", "de", "el", "en"]

的方式

这是管道

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

这是我的服务

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

是返回对象：{key: "en", value: "English"}

不幸的是，所有代码均无法正常运行。我的服务仅返回最后一项。因此，应用程序返回错误：

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.

如果我在管道中执行console.log，它将依次打印整个对象以及所有元素，不幸的是，只有最后一个对象才能显示pip和html文件。我需要寻求帮助来查找此问题的原因以及解决方案的示例。

Answer 1

您是要执行以下操作吗？

const key = k.split(".").pop();
object[key] = v;
return object;

它将导致：

{
en: 'English',
fr: 'French',
...
}

或者，如果要对象数组，则reduce中的累加器应为数组：

            .reduce((array, [k, v]) => {
                const object = {};
                object['key']=k.split(".").pop();
                object['value']=v;
                array.push(object)
            }, [])

这将导致：

[
{key: 'en', value: 'English'},
{key: 'fr', value: 'French'}
]

.reduce仅返回一个对象，而不是对象数组

1 个答案: