Angular Pipe(过滤器)使用笔记

最新推荐文章于 2024-08-15 08:13:04 发布

Litwak

最新推荐文章于 2024-08-15 08:13:04 发布

阅读量1.5k

点赞数

分类专栏： angular 文章标签： Angular pipe

本文链接：https://blog.csdn.net/u013475983/article/details/80111923

版权

angular 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

pipe-test.html

<div class="pipe_div">
  <div class="pipe_title">日期:{{today}}</div>
  <div>
    <label>today | date</label>
    <strong>{{today | date}}</strong>
  </div>

  <div>
    <label>today | date: 'y-MM-dd' </label>
    <strong>{{today | date: 'y-MM-dd'}}</strong>
  </div>

  <div>
    <label>today | date: 'y-MM-dd HH:mm:ss' </label>
    <strong>{{today | date: 'y-MM-dd HH:mm:ss'}}</strong>
  </div>

  <div>
    <label>tool.formatDate(this.today)</label>
    <strong>{{todayStr}}</strong>
  </div>
</div>

<div class="pipe_div">
  <div class="pipe_title">数字:{{money}}</div>
  <div>
    <label>money | number: '3.4-5'</label>
    <strong>{{money | number: '3.4-5'}}</strong>
  </div>

  <div>
    <label>money | number: '2.2-2'</label>
    <strong>{{money | number: '2.2-2'}}</strong>
  </div>

  <div>
    <label>money | currency: 'USD': false </label>
    <strong>{{money | currency: 'USD': false }}</strong>
  </div>

  <div>
    <label>money | currency: 'CNY': true: '3.1-3'</label>
    <strong>{{money | currency: 'CNY': true: '3.1-3'}}</strong>
  </div>

  <div>
    <label>money | percent</label>
    <strong>{{money | percent}}</strong>
  </div>

  <div>
    <label>money | percent: '3.1-3'</label>
    <strong>{{money | percent: '3.1-3'}}</strong>
  </div>
</div>

<div class="pipe_div">
  <div class="pipe_title">字符串:{{abc}}</div>
  <div>
    <label>abc | slice: 2 : 4</label>
    <strong>{{abc | slice: 2 : 4}}</strong>
  </div>
  <div>
    <label>abc | lowercase | uppercase </label>
    <strong>{{abc | lowercase | uppercase }}</strong>
  </div>
</div>

pipe-test.ts

import { Component, OnInit } from '@angular/core';
import { ToolService } from '../service/tool.service';

@Component({
  selector: 'app-pipe-test',
  templateUrl: './pipe-test.component.html',
  styleUrls: ['./pipe-test.component.scss']
})
export class PipeTestComponent implements OnInit {
  today: Date;
  money: number;
  abc: string;
  todayStr: String;
  constructor(private tool: ToolService) { }

  ngOnInit() {
    this.today = new Date();
    this.money = 9999999999.999;
    this.abc = 'abcdeFGhabc';
    this.todayStr = this.tool.formatDate(this.today);
  }

}

pipe-test.scss

.pipe_div {
    padding: 8px 0;
    div label {
        display: inline-block;
        width: 200px;
    }
    div strong {
        width: 200px;
    }
    .pipe_title {
        font-size: 18px;
        padding: 6px;
        font-weight: 700;
    }
}