如何在TS中使用管道而不是HTML [英] How to use pipe in ts not HTML
本文介绍了如何在TS中使用管道而不是HTML的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将文本从ts添加到html元素中
I adding text into html element from ts
像这样
this.legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
这将创建类似
<text>Data will come here</text>
我想用管道将这些数据转换成某种形式 如何从ts代码中做到这一点?
I want to use pipe to convert this data into some form how can I do that from ts code ?
并且由于我是动态创建此HTML的,因此无法使用这样的管道
and as I am creating this HTML dynamically I cannot use pipe like this
<text>{{Data will come here | pipename}} </text>
我正在寻找
this.legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; }).applypipe('pipename');
推荐答案
首先将管道导入组件.然后在组件中使用管道.像这样.
First import your pipe in component. And then use your pipe in your component. Like this..
pipe.ts
/**
* filter checkbox list
*/
@Pipe({ name: 'filter', pure: true })
export class FilterPipe{
transform(items: any[], args: any): any {
let filter = args.toString();
if(filter !== undefined && filter.length !== null){
if(filter.length === 0 || items.length ===0){
return items;
}else{
return filter ? items.filter(item=> item.title.toLocaleLowerCase().indexOf(filter) != -1) : items;
}
}
}
}
component.ts (在打字稿代码中使用)
component.ts (Use in your typescript code)
const filterPipe = new FilterPipe();
const fiteredArr = filterPipe.transform(chkArray,txtSearch);
xyz.html (在html文件中使用)
xyz.html (Use in your html file)
<ul>
<li *ngFor="todo for todos | filter:'txtsearch'"> {{todo.name}} </li>
</ul>
这篇关于如何在TS中使用管道而不是HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文