如何使用html中的变量管道？角9
如何使用html中的变量管道？角9
提问于 2020-07-17 08:07:01
我把整个管道作为参数之一传递给大家，我很难使用它。
对象格式如下所示：
{
column: 'productExpirationDate',
caption: 'Product expiration date',
pipe: 'date: \"' + PIPE_DATE_FORMAT + '\"'
},当PIPE_DATE_FORMAT保存'yyyy-MM-dd'时，输出格式应该是'date: "yyyy-MM-dd"'
如果我试图在html文件中使用它，如
<span *ngIf="element.pipe">{{ row[element.column] | element.pipe }}</span>它呼喊着
分析器错误:意外令牌‘.
我已经找到了Angular - pass pipe as variable的帖子，但我不知道如何在我的案例中做到这一点。此外，不推荐使用get方法，这只会增加更多的混乱。
我怎么能从变量中使用那个管道呢？
回答 3
Stack Overflow用户
发布于 2020-07-17 08:23:45
定制的烟斗怎么样？您可以在管道中实现这个参数化逻辑，您的html应该如下所示：
<span *ngIf="element.pipe">{{ row[element.column] | myCustomPipe: element.customPipeParams }}</span>您应该做的就是正确地实现myCustomPipe，当然可以重用现有的角管道，例如。约会烟斗。
Stack Overflow用户
发布于 2020-07-17 08:24:10
在这里，你使用管道的方式不太正确。首先，管道文件应该有如下代码：
@Pipe({
name: 'customDate'
})
export class CustomDateFormat extends DatePipe implements PipeTransform {
transform(value: any, args?: string): any {
let formatter;
switch (args) {
case 'PIPE_DATE_FORMAT ':
{
formatter = super.transform(value, 'yyyy-MM-dd');
break;
}
default:
{
formatter = super.transform(value, 'dd/mm');
break;
}
}
return formatter;
}
}你的变量应该有这样的值：
{
column: 'productExpirationDate',
caption: 'Product expiration date',
pipe: 'customDate: PIPE_DATE_FORMAT '
},您的html应替换为：
<span *ngIf="element.pipe">{{ row[element.column] | element.pipe }}</span>Stack Overflow用户
发布于 2020-07-17 08:23:14
您可以在变量中使用日期格式，并在模板中直接使用此格式。
如下所示：
const PIPE_DATE_FORMAT = 'yyyy-MM-dd'
{
column: 'productExpirationDate',
caption: 'Product expiration date',
},<span >{{ row[element.column] | date:PIPE_DATE_FORMAT }}</span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62949727
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号