angular 管道应用

快来打我* 2022-05-10 05:54 179阅读 0赞

原文出处：[https://www.cnblogs.com/LWJ-booke/p/9512126.html][https_www.cnblogs.com_LWJ-booke_p_9512126.html]

1、创建filter文件

import { Pipe, PipeTransform } from '@angular/core';
    import moment from 'moment'
    
    // 管道--性别
    @Pipe({name: 'sexType'})
    export class sexType implements PipeTransform {
      transform(value) {
        if(value === 'boy') {
          return '男'
        } else if (value === 'girl') {
          return '女'
        } else {
          return '--'
        }
      }
    }
    
    // 时间格式
    @Pipe({name: 'formatDate'})
    export class formatDate implements PipeTransform {
      transform(value, formatString = 'YYYY年MM月DD日') {
        if (moment(value).isValid()) {
          return moment(value).format(formatString)
        }
        return '--'
      }
    }

2、在app.module.ts导入

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule }   from '@angular/forms';
    import { sexType, formatDate } from './filter/filter';
    
    @NgModule({
      declarations: [
        sexType,
        formatDate
      ],
      imports: [
        NgbModule.forRoot(),
        BrowserModule,
        FormsModule
      ],
      providers: [],
      bootstrap: []
    })
    export class AppModule { }

3、页面使用

<div class="row">
      <div class="col-md-10 Title"><span>事业发展</span></div>
      <div class="col-md-12">
        <p *ngFor="let v of userList">
          <span>{
      {v.name}}--{
      {v.age}}--{
      {v.sex | sexType}}</span>
          <button ng-click='sayHello()'>修改</button>
        </p>
      </div>
    </div>

4、不好之处，请指教

[https_www.cnblogs.com_LWJ-booke_p_9512126.html]: https://www.cnblogs.com/LWJ-booke/p/9512126.html

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular自定义管道

1.用命令生成multiple管道 ng g pipe pipe/multiple 画面效果： ![20191027181905796.png][] app.compo

女爷i/ 2023年06月10日 12:21/ 0 赞/ 5 阅读

相关 angular 测试_Angular应用的视觉回归测试

angular 测试 I recently planned a major CSS refactoring project to transition a large e-c

素颜马尾好姑娘i/ 2023年02月22日 03:43/ 0 赞/ 169 阅读

相关 Angular4 之DatePipe（日期时间管道）

原文出处：[https://blog.csdn.net/sinat\_41806435/article/details/97891684][https_blog.csdn.ne

你的名字/ 2022年11月18日 02:13/ 0 赞/ 208 阅读

相关 Angular4-在线竞拍应用-管道

<p>我的生日是{ { birthday}}</p> birthday:Date=new Date(); 显示结果为我的生日是Sun Oct 0

ゝ一纸荒年。/ 2022年06月06日 05:57/ 0 赞/ 200 阅读

相关 Angular管道操作符(|)

一、模板表达式操作符模板表达式语言使用了JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符：管道操作符、安全导航操作符。二、管道操作符 (|) 在

忘是亡心i/ 2022年06月04日 05:23/ 0 赞/ 249 阅读

相关 (十)、Angular4.0 数据绑定、管道

一、基本HTML属性绑定 tableColspan的值会赋给colspan <td [attr.colspan]="tableColspan">Somethi

以你之姓@/ 2022年05月28日 04:35/ 0 赞/ 198 阅读

相关 Angular 2 的Pipe(管道)

Angular 2 中 Pipe(管道) 与 Angular 1.x 中的 filter(过滤器) 的作用的是一样的。它们都是用来对输入的数据进行处理，如大小写转换、数值和日期

桃扇骨/ 2022年05月22日 09:18/ 0 赞/ 212 阅读

相关 Angular Pipe管道理解及用法

1.什么是Pipe? 就是管道，简单来说，管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据) 2.pipe用法 \{ \{ 输入数据 | 管道

忘是亡心i/ 2022年05月15日 08:24/ 0 赞/ 435 阅读

相关 angular 管道应用

原文出处：[https://www.cnblogs.com/LWJ-booke/p/9512126.html][https_www.cnblogs.com_LWJ-booke_

快来打我*/ 2022年05月10日 05:54/ 0 赞/ 180 阅读

相关 angular 语法的应用

　　angular.js 一个js框架，是三大主流框架之一：（ vue react angular ）；　　原先的开发：前端和后台，利用 Ajax 进行交互，　

心已赠人/ 2021年12月07日 09:41/ 0 赞/ 269 阅读