angular 管道的运用

最新推荐文章于 2024-04-30 12:14:06 发布

xggllc

最新推荐文章于 2024-04-30 12:14:06 发布

阅读量379

点赞数

分类专栏： Angular 文章标签： html angular js

本文链接：https://blog.csdn.net/xggllc/article/details/120265192

版权

Angular 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Angular应用中创建一个自定义管道`filterListType.pipe.ts`，用于过滤数组中type属性不等于3的元素。在组件模块中引入并使用该管道，可以在模板中直接对数据进行过滤，例如在`<option-component>`中展示过滤后的结果。

摘要由CSDN通过智能技术生成

简单版管道过滤数组

一，管道文件
filter-list-type.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filterListType',
    pure:false
})
// 过滤数组中tyle不为3的 元素
export class FilterListTypePipe implements PipeTransform {
    transform(value: any[]):any[]{
        if(value){
            let mtepValue = value.filter((item: any) => {
                return item.type == 3;
            });
            return mtepValue;
        }
    }
}

二，在组件***.module.ts 中引用
import { FilterListTypePipe } from './filter-list-type.pipe'

@NgModule({
  declarations: [
FilterListTypePipe
],
  exports: [FilterListTypePipe],
  providers: [
    FilterListTypePipe
  ]})

三，html 中使用
//过滤数组中tyle不为3的 元素
<option-component *ngFor="let it of tb.fields | filterListType" [value]="it.name" [label]="it.name"></option-component>