如何在 Angular/Ionic Observable/Promise 的 AsyncPipe 中返回默認值

Question

我使用 aws translate 做了一個異步管道來顯示帶有承諾的翻譯文本並且它有效，但我需要定義用戶是否需要原始文本，或者是否需要翻譯，所以我向提供者添加了值isActive: boolean = false和if條件所以 if isActive是false ，只返回默認值，但我得到這個：

PipelinePage.html:87 ERROR Error: InvalidPipeArgument: 'In Progress' for pipe 'AsyncPipe'

translate.pipe.ts //管道

import { Pipe, PipeTransform } from '@angular/core';
import { TranslateProvider } from "../../providers/translate/translate";

@Pipe({
  name: 'translate',
})
export class TranslatePipe implements PipeTransform {
  constructor(public translate: TranslateProvider){}

  transform(value: string, ...args) {
      if(this.translate.isActive === true){
        const params = {
          Text: value,
          SourceLanguageCode: "en",
          TargetLanguageCode: "es"
        };
        let actionPromise = this.translate.translator.translateText(params).promise();
        return actionPromise.then((data) => {
          return data.TranslatedText;
        }).catch((err) => {
          console.log(err);
        });
      } else {
        return value;
      }
    }

}

translate.ts //提供者

export class TranslateProvider {
  ...
  public isActive: boolean = false;
  ...
}

在模板上：

translate | async

如果 isActive 為 false，如何返回默認值？ 先感謝您。

Answer 1

async管道需要 Promise 或 Observable 作為輸入，但是當 isActive 為false您只需返回一個字符串。

所以在你的 TranslatePipe 中而不是使用return value; 您需要返回一個以值作為內容的 Promise。

您還可以嘗試將整個轉換方法標記為async ，它應該會自動將任何返回值放入 Promise 中。 所以它應該看起來像這樣：

  async transform(value: string, ...args) {
      if(this.translate.isActive === true){
        const params = {
          Text: value,
          SourceLanguageCode: "en",
          TargetLanguageCode: "es"
        };
        let actionPromise = this.translate.translator.translateText(params).promise();
        actionPromise.then((data) => { // <- Dont return the promise but return in the promise (you could also use await)
          return data.TranslatedText;
        }).catch((err) => {
          console.log(err);
        });
      } else {
        return value;
      }
    }