如何等到翻譯數組循環完成 - 使用訂閱

Question

這是我的翻譯方法。 在控制台上獲取空數組。 如何處理這個？

 headersTranslator(headers) {
    const transHeader: any[] = [];
    headers.map((header) => {
        this.translate.get(header.title).subscribe((value) => {
            if (!value) return;
            transHeader.push({ ...header, title: value });
        });
    });
    console.log('transHeader', transHeader);
    return transHeader;
}

我的嘗試：由於在循環下放置了 observable，所以發現具有挑戰性。

 headersTranslator(headers) {
    const transHeader: any[] = [];
    return new Promise((resolve, reject) => {
        headers.map((header) => {
            this.translate.get(header.title).subscribe({
                next: (value) =>
                    transHeader.push({ ...header, title: value }),
            });
        });
        resolve(transHeader);
    });
}

Answer 1

您需要使用諸如forkJoin類的運算符將一組可觀察對象轉換為單個可觀察對象，該可觀察對象返回這些底層可觀察對象的結果數組

對於異步版本，請使用firstValueFrom或lastValueFrom ：

async function headersTranslator(headers) {
    const observables = headers.map(header =>
                                    this.translate.get(header.title)
                                    .pipe(map(value => ({ ...header, title: value }))));
    return await lastValueFrom(forkJoin(observables));       
}

或者，如果您希望 function 返回可觀察對象並訂閱它：

function headersTranslator(headers) {
    const observables = headers.map(header =>
                                    this.translate.get(header.title)
                                    .pipe(map(value => ({ ...header, title: value }))));
    return forkJoin(observables);       
}

Answer 2

我試過了，它有效。

async headersTranslator(headers) {
    const transHeader: any[] = [];
    return new Promise((resolve, reject) => {
        headers.map((header, i) => {
            this.translate
                .get(header.title)
                .subscribe({
                    next: (value) =>
                        transHeader.push({ ...header, title: value }),
                })
                .add(() => {
                    if (headers.length === i + 1) {
                        resolve(transHeader);
                    }
                });
        });
    });
}

但是正在尋找一種標准的方法來獲得它。