angular-pipe:管道

DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipe，PercentPipe。

• date：

eg：2019-4-25 19:11:58
年：
y，yy，yyy，yyyy，
数字: 最小位数；eg：2019
数字: 2 数字 + 0 补位；eg：19
数字: 3 数字 + 0 补位；eg：2019
数字: 4 或更多数字 + 0 补位；eg：2019

月：
M，MM，MMM，MMMM，MMMMM
数字: 1 数字；eg：4
数字: 2 数字 + 0 补位；eg：04
缩略：Apr
全称：April
最简：eg：S

日：
d，dd
数字: 最小位数；
数字: 2 数字 + 0 补位；

小时：
h，hh，H，HH
数字: 最小位数；eg：1, 12
数字: 2 数字 + 0 补位；eg：01, 12
数字: 最小位数；eg：0, 23
数字: 2 数字 + 0 补位；eg：00, 23

注：H和h的区别！

分：
m，mm

秒：
s，ss

• uppercase和lowercase和titlecase：

{{str|uppercase}}

{{str2|lowercase}}

    <p>{{'some string' | titlecase}}</p> <!-- output is expected to be "Some String" --> 
    <p>{{'tHIs is mIXeD CaSe' | titlecase}}</p> <!-- output is expected to be "This Is Mixed Case" --> 
    <p>{{'it\\'s non-trivial question' | titlecase}}</p> <!-- output is expected to be "It's Non-trivial Question" --> 
    <p>{{'one,two,three' | titlecase}}</p> <!-- output is expected to be "One,two,three" -->
    <p>{{'true|false' | titlecase}}</p> <!-- output is expected to be "True|false" -->
    <p>{{'foo-vs-bar' | titlecase}}</p> <!-- output is expected to be "Foo-vs-bar" -->

• currency：

a: number = 0.259;
    {{a|currency:"$"}}    $0.26 
    {{a|currency:"￥"}}   ￥0.26
    {{a|currency:"EUR"}}   €0.26
  

percent：

a: number = 0.259;
b: number = 1.34950000;
c: number = 1.34952365;
<p>A: {{a | percent}}</p> <!--output '26%'-->
<p>B: {{b | percent:'4.3-5'}}</p><!--output '0,134.950%'-->
<p>c: {{c | percent:'4.3-5'}}</p> <!-- 0,134.95237%-->
<p>d: {{c| percent:'1.3-5'}}</p><!--134.95237%-->
<p>e: {{c | percent:'.3-5'}}</p><!--134.95237%-->

4.3-5：代表：整数保留4位，小数部分保留3到5位；如果是0，就是3位；如果不是0，那就保留5位；

• JSON：

{{object | json}}

• i18nSelect：

i18nSelect是写死的字段！map2是一个对象的名字（随意的）！

 <div>{{str3 | i18nSelect: map2}} </div>

// js:
str3: string = 'b';
  map2: any = {
    'a': 'Invite him.',
    'b': 'Invite her.',
    'c': 'Invite them.'
  };

• SlicePipe

所有行为都基于 JavaScript API Array.prototype.slice() 和 String.prototype.slice() 的预期行为。

str||arr.slice(start,end)
其中：[start,end) =>半闭合！都是指索引值！不改变原数组；

a.截取数组：

<ul>
    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
</ul>


 collection: string[] = ['a', 'b', 'c', 'd'];

结果：

<li>b</li>
<li>c</li>

b.截取字符串：

str: string = 'abcdefghij';
    <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
    <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
    <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
    <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
    <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
    <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>

• DecimalPipe

decimal [ˈdesɪml]
adj. 十进位的;小数的
n.小数

注：把数字转换成字符串。

pi: number = 3.14;
e: number = 2.718281828459045;
<p> {{e | number}}</p> <!--output '2.718'-->
<p>{{e | number:'3.1-5'}}</p><!--output '002.71828'-->
<p> {{e | number:'4.5-5'}}</p><!--output '0,002.71828'-->
<p> {{pi | number}}</p><!--output '3.14'-->
<p>{{pi | number:'3.1-5'}}</p>  <!--output '003.14'-->
<p> {{pi | number:'3.5-5'}}</p><!--output '003.14000'-->
<p> {{-2.5 | number:'1.0-0'}}</p><!--output '-3' / unlike '-2' by Math.round()-->

其中：整数：默认一位；
小数：默认1-3位；
eg：

{{e|number:'1.1-3'}}

• 自定义管道

<div>{{ 2 | exponentalStrength:'3.1' }}</div>


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

@Pipe({
  name: 'exponentalStrength'
})
export class ExponentalStrengthPipe implements PipeTransform {
	// value:值    exponent：参数，参数可以没有！
  transform(value: number, exponent?: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }

}

管道都会implements PipeTransform，然后调用transform函数！

• 纯(pure)管道与非纯(impure)管道

有两类管道：纯的与非纯的。 默认情况下，管道都是纯的。以前见到的每个管道都是纯的。 通过把它的 pure 标志设置为 false，你可以制作一个非纯管道。你可以像这样让 FlyingHeroesPipe 变成非纯的：

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false  // 修改的地方
})

Angular 只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改， 或者对对象引用(Date、Array、Function、Object)的更改。Angular 会忽略(复合)对象内部的更改。

eg：

<div *ngFor="let hero of (heroes | flyingHeroes)">
    {{hero.name}}
</div>

当对heroes这个数组改变时，展示的内容是没有变化的，因为引用一直没有变化！！！！
如果想检测到，需要使用非纯管道！参考：官网：https://angular.cn/guide/pipes#chaining-pipes
或者改变数组的引用，使用concat：eg：

// this.heroes.push(hero);
this.heroes=this.heroes.concat(hero);

• 附录：没有 FilterPipe 或者 OrderByPipe

Angular 没有随身发布过滤或列表排序的管道。 熟悉 AngularJS 的开发人员应该知道 filter 和 orderBy 过滤器，但在 Angular 中它们没有等价物。

这并不是疏忽。Angular 不想提供这些管道，因为 (a) 它们性能堪忧，以及 (b) 它们会阻止比较激进的代码最小化(minification)。
过滤、 排序是是特别昂贵的操作。

pipe在ts中的使用

app.module中：

 providers: [ 
    DatePipe
  ],

import {DatePipe} from '@angular/common';
constructor(
  private datePipe:DatePipe,
) {}


console.log(this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss'));

自定义管道

参考自己的：https://blog.csdn.net/weixin_42995876/article/details/101220730

小数点位数处理的问题

<nz-input-number style="width:250px;" [(ngModel)]="detailsInfo.applyCredit"
                 (nzBlur)="onblurEvent(detailsInfo,'applyCredit')"
                 [nzPlaceHolder]="'请输入'"
                 [nzMax]="999999999999" [nzMin]="0"
                 [nzPrecision]="2" [nzFormatter]="numFormat">

</nz-input-number>



private decimalPipe: DecimalPipe,
// 金额格式化
numFormat = (value: number) => {
  return this.decimalPipe.transform(value, '.2-2');
}

1.最大值和最小值，通过max和min处理控制；
2.nzPrecision不起作用；0的时候，可以使用；
3.小数格式化，需要通过nzFormatter控制；

onblurEvent(item, isCalcFlag = '') {
  this.cdRef.detectChanges(); // 必须加上这个，这样才可以出发数据跟新。
  
  // 也可以通过该方法处理两位小数的问题。
  item.applyCredit = this.isInputNoEmpty(item.applyCredit) ? Number(item.applyCredit).toFixed(2) : ''; // 申请调整后额度金额


  // 有效额度时候的计算
  if (isCalcFlag == 'applyCredit') {
    if (this.isInputNoEmpty(item.applyCredit)) {
      if (item.applyCredit < item.credit - item.surplusCredit) {
        this.message.error('申请调整后额度金额需要大于已使用的额度');
        item.applyCredit = null; // 清空
      }
    }
  }
}


// 校验input框是否为空
isInputNoEmpty(value) {
  // 必须全等；有时候后端返回数值型，直接trim报错的；
  if (value === '' || value == null || value == undefined || (value + '').trim() == '') {
    return false;
  } else {
    return true;
  }
}

注：

''==0  // true
''===0  // false