Http请求开始泄漏

Question

我使用此代码用translateBack翻译每个单词

<span *ngFor="let word of getWords(); index as i">
<button (click)="speak(word)"
[matTooltip]="translateBack(word) | async">{{word}}</button>
</span>

其中translateBack是

translateBack(word: string) {
const options = {q: word, source: 'ru-RU', target: 'en-GB'};
return this._http.post(url + key, options).pipe(
take(1),
map((res: any) => res.data.translations[0].translatedText)
)
}

但在我的控制台中，它显示了一个没完没了的http请求日志。怎么拿一个？(我试着拿了(1((

Answer 1

在Angular中，最好使用forkJoin在循环中进行调用：

使用forkJoin一次翻译所有单词

translateWord=forkJoin(this.getWords().map(word=>{
const options = {q: word, source: 'ru-RU', target: 'en-GB'};
//I suppose is this.url and this.key
return this._http.post(this.url + this.key, options).pipe(map(
(res:any)=>({word:word,translate:res.data.translations[0].translatedText})))
}
))

并使用

<span *ngFor="let word of translateWord|async; index as i">
<button (click)="speak(word.word)"
[matTooltip]="word.translate">{{word.word}}</button>
</span>