javascript - 如何在 Angular/Ionic Observable/Promise 中的 AsyncPipe 中返回默认值

Question

我使用 aws translate 做了一个异步管道来显示带有承诺的翻译文本并且它可以工作，但是我需要定义用户是否想要原始文本，或者它是否想要翻译，所以我向提供者添加了值isActive: boolean = false和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，我如何返回默认值？先感谢您。

标签： javascriptangulartypescriptionic-framework

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