文档章节

自定义指令控制两位小数显示,接口Interface和TS解构

SubinY
 SubinY
发布于 2017/08/03 21:29
字数 722
阅读 48
收藏 0

自定义指令

需求:在表单提交时text="number"的输入框必须以两位小数点显示,即输入10 => 10.00, 10.1234 => 10.12。

难点:双向数据绑定[(ngModal)]="value",不支持对值的操作,即不能使用管道去控制。

then,下面的自定义指令customDecimal是通过获取元素本身的value进行操作,再赋值回给元素本身实现

import { Directive, Input, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
import { CommonModule, DecimalPipe } from "@angular/common";

@Directive({
    selector: '[customDecimal]'
})
export class DecimalDirective implements AfterViewInit {
    // 括号里是dom输入的名字,括号后面是别名,方便操作而已
    @Input('customDecimal')
    customDecimal: any;
    
    // el,获取该元素集合,rd2,dom的方法属性集合(Renderer没有监听事件),decimalPipe,小数管道
    constructor(public el: ElementRef, public rd2: Renderer2, public decimalPipe: DecimalPipe) {
    }
    
    ngAfterViewInit() {
        // listen为angular封装的一些操作dom的集合,详情看对应的接口
        this.rd2.listen(this.el.nativeElement, 'blur', (e) => {
            let v = e.srcElement.value;
            if (v && +v) {
                // 这里的this指的是DecimalDirective指令,要获得指令控制的元素必须让dom传一个模板变量进来
                let value = this.customDecimal.value;
                value = this.decimalPipe.transform(v, '1.2-2');
                // 由于number类型的输入框,在输入3位整数以上会出现逗号
                // 管道转换3位整数以上会出现逗号分隔
                this.customDecimal.value = Array.from(value).map((val, i) => {
                    return (val === ',') ? '' : val;
                }).join('');
            } else {
                return;
            }
        })
    }
}

HTML

必须传入模板变量#ipt

<input #ipt type="number" id="name" class="form-control" formControlName="name" [customDecimal]="ipt">

---------------

接口Interface

接口是强控制对象属性,像结构语法,VO只是一个对象用来方便对接

这是typeScript的结构方法:   ({title: string, name: string}) => {}

实际传进来的参数对象不止title 和 name两个属性, 但ts只会描述这两个属性,其他忽略,这就是接口的作用,固化对象属性值

TS中的解构和接口是两码事

这里就不解释解构是什么,TS官网更详尽。

刚开始接触解构和接口的时候,老是想尝试用解构或者接口搞一番优秀代码,但自己理解错误,老认为解构就是接口的写法,也是可以达到过滤数据的。像例子1

let data = {name: 'name', age: 10};
// 我一直以为这样就可以定义接口,对data作简单过滤
let obj: {name} = data;

解构基本用法

let {name, age} = {name: 'hu', age: 10};

/*结果
name  =>  'hu'
age  => 10
*/

接口基本用法

interface person {
  name: string,
  age: number
}

let fn = function(obj: person): void{
  console.log(obj);
}

fn({name: 'hu', age: 10, sex: 'male'}); // {name: 'hu', age: 10} 过滤了sex

误区:不要以为{xxx,  xxx}就是接口,像例子1,是JS的赋值操作,并没有什么过滤控制,最常见的接口过滤就是在方法中传参数,才能过滤。赋值操作并不能达到过滤效果。

 

谈一下implements 和extend

Renderer2抽象类提供的属性和方法

© 著作权归作者所有

SubinY
粉丝 9
博文 87
码字总数 66343
作品 0
佛山
程序员
私信 提问
TypeScript学习笔记

TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript。当然最后代码还是编译为Javascript。 参考:http://www.typescriptlang.org/docs/handbook/basic-types.html 中文翻...

Jarhf
2017/11/27
0
0
java保留两位小数

java保留两位小数问题: 方式一: 四舍五入 double f = 111231.5585; BigDecimal b = new BigDecimal(f); double f1 = b.setScale(2, BigDecimal.ROUNDHALFUP).doubleValue(); 保留两位小数 ......

日拱一卒
2016/09/05
31
0
Delphi 中Format的字符串格式化使用说明

一、Format函数的用法 Format是一个很常用,却又似乎很烦的方法,本人试图对这个方法的帮助进行一些翻译,让它有一个完整的概貌,以供大家查询之用: 首先看它的声明: function Format(cons...

老朱教授
2017/08/27
0
0
java 数字保留2位小数 格式化为价格类型

ava保留两位小数问题: 方式一: double f = 3.1516;BigDecimal b = new BigDecimal(f);double f1 = b.setScale(2, BigDecimal.ROUNDHALFUP).doubleValue();方式一中使用BigDecimal中的设置精......

Code辉
2018/09/17
0
0
Format、FormatDateTime、FormatFloat 的用法

Format、FormatDateTime、FormatFloat 的用法 2007-01-27 13:10:09| 分类: 技术 | 标签:随笔 delphi 技术 |字号大中小 订阅 引用 小宇飞刀 的 Format、FormatDateTime、FormatFloat 的用法...

技术小大人
2017/11/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

gradle grovvy中的闭包

1. 无参数的闭包 //这b1就是一个闭包def b1={ println "hello b1"}//定义方法,包含闭包类型的参数def method1(Closure closure){closure()}//执行method1method1(b1) 执行结果 ...

edison_kwok
35分钟前
3
0
基于Spring Boot + Dubbo的全链路日志追踪(一)

一、 概要 当前公司后端整体架构为:Spring Boot + Dubbo。由于早期项目进度等原因,对日志这块没有统一的规范,基本上是每个项目自己管自己的日志。这也对后面的问题排查带来了很大的困难,...

明天以后
今天
7
0
安装fastdfs文件服务器步骤

1、安装libfastcommon wget https://github.com/happyfish100/libfastcommon/archive/master.zip 解压后安装 cd fastcommon-master ./make.sh ./make.sh install 2、安装 FastDFS,从sourcef......

lsjlgo
今天
3
0
MySQL 5.7 免安装版配置

下载地址:https://dev.mysql.com/downloads/mysql/ 安装步骤 1.下载zip解压到目录下 2.配置环境变量 新建系统变量:MYSQL_HOME,值:D:\DevelopmentTool\Mysql-5.7.26-winx64 修改path变量:...

华山猛男
今天
7
0
java map的遍历

//从大的角度可以分为两类Set<String> set=map.keySet();这里面还可以分为3类, 从set的角度来分 //Set<Map.Entry<String, String>> entery=map.entrySet(); public class Test { public sta......

南桥北木
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部