Angular 管道内用于 HTML 过滤的可观察请求
Observable request inside Angular pipe for HTML filtering
我知道有异步管道,使用可观察对象,您可以订阅并在更新时获取值。
我正在尝试创建一个简单的管道,它将使用其代码获取分类器的翻译,但它使用可观察对象来实现,因此它是异步的。我能以某种方式等待 aync 操作完成然后 return 结果吗?什么是最佳方式?
我不认为 async Pipe 是我要找的东西,因为它基本上是一个拥有自己 HTML 的组件。
代码
@Pipe({
name: 'translate'
})
export class Translate implements PipeTransform {
constructor(public translateContext: TranslateContext) {
}
transform(value: any, classification: string): any {
this.translateContext.getTranslation(classification).subscribe(res => {
return res.get(value.toString());
});
}
}
我想在 HTML 中使用以下管道
{{code | translate: classificator }}
我怎样才能解决这个问题,从管道中它会得到这个值。
return res.get(value.toString());
更改为:
transform(value: any, classification: string): any {
return this.translateContext.getTranslation(classification).map(res => {
return res.get(value.toString());
});
}
并像这样使用它:
{{code | translate:classificator | async }}
这里的想法是 return 一个包含您的值的可观察对象,然后使用 async
订阅该可观察对象。这将在您的模板中显示映射值。
我知道有异步管道,使用可观察对象,您可以订阅并在更新时获取值。
我正在尝试创建一个简单的管道,它将使用其代码获取分类器的翻译,但它使用可观察对象来实现,因此它是异步的。我能以某种方式等待 aync 操作完成然后 return 结果吗?什么是最佳方式? 我不认为 async Pipe 是我要找的东西,因为它基本上是一个拥有自己 HTML 的组件。
代码
@Pipe({
name: 'translate'
})
export class Translate implements PipeTransform {
constructor(public translateContext: TranslateContext) {
}
transform(value: any, classification: string): any {
this.translateContext.getTranslation(classification).subscribe(res => {
return res.get(value.toString());
});
}
}
我想在 HTML 中使用以下管道
{{code | translate: classificator }}
我怎样才能解决这个问题,从管道中它会得到这个值。
return res.get(value.toString());
更改为:
transform(value: any, classification: string): any {
return this.translateContext.getTranslation(classification).map(res => {
return res.get(value.toString());
});
}
并像这样使用它:
{{code | translate:classificator | async }}
这里的想法是 return 一个包含您的值的可观察对象,然后使用 async
订阅该可观察对象。这将在您的模板中显示映射值。