angular 字符串转换成数字_Angular日期在TypeScript中格式化转换应用

组件模板中我们常常使用Angular内置管道DatePipe将其日期格式化,如同{{ startTime | date:'yyyy-MM-dd' }}这般操作,即可转换为字符串格式。那么在TS文件中我们也可以通过DatePipe或formatDate方法将其格式化。
Angular日期在TypeScript中格式化转换应用​www.deathghost.cn
7b5cbf4f036385f401347f6f2c7634e6.png

在前端项目开发过程中往往会遇将日期格式化,转换为友好显示格式,如同将"Sat Jun 01 2019 23:21:55 GMT 0800"格式化为"yyyy-MM-dd"(年-月-日);Angular项目中我们常常使用其内置管道将其格式转换e.g. {{ startTime | date:"yyyy-MM-dd" }},以达到所要显示的格式;下面我们看看在TypeScript(.ts)中的方法应用。

Angular6.x之前一直使用DatePipe转换日期格式,在angular6.x 之后API中又发现formatDate方法,具体就不晓得了,我一直使用DatePipe。

d2261558c61754fd997b396d3ff79165.png

DatePipe在.TS的应用

import { DatePipe } from '@angular/common';export class DemoComponent implements OnInit {   
constructor(private datePipe: DatePipe) {}formatDateFun(date) {return this.datePipe.transform(date, 'yyyy-MM-dd');}
}

别忘记在当前模块中将其providers: [DatePipe]添加。

formatDate在.TS的应用

import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { formatDate } from '@angular/common';export class DemoComponent implements OnInit {constructor(@Inject(LOCALE_ID) private locale: string) {}formatDateFun(date) {return formatDate(date, 'yyyy-MM-dd', this.locale);}
}

如上设置记得在项目根模块配置

import { NgModule, LOCALE_ID } from '@angular/core';
providers:[{provide: LOCALE_ID, useValue: 'zh-Hans' }]

又或者不设置,则在formatDate中直接使用'zh-Hans'(简体中文)即可,如:

formatDate(new Date(), 'yyyy-MM-dd', 'zh-Hans')

其语法结构如:

formatDate(value: string | number | Date, format: string, locale: string, timezone?)

value: 要格式化的日期,是一个日期、数字(从 UTC 时代以来的毫秒数)或 ISO 字符串;

format: 日期时间格式,使用预定义选项或自定义格式字符串(如:2019年07月25日...);

locale: 区域代码;

timezone: (选填) 时区;

就到这里,上次在项目框架升级到Angular8.x版本时原 DatePipe 方法格式化地方报错,索性将其全更换为 formatDate 方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506352.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python罗马数字转换,Python3.5实现的罗马数字转换成整数功能示例

本文实例讲述了Python3.5实现的罗马数字转换成整数功能。分享给大家供大家参考,具体如下:问题概述:给定一个罗马数字 ,将罗马数字转换成整数。如罗马数字I,II,III,IV,V分别代表数字 …

js在一个指定元素前添加内容_WebAR开发指南(1)---使用AR.js实现第一个WebAR demo...

前面有一篇文章万字干货介绍WebAR的实现与应用 分析了目前流行的WebAR框架并简单的介绍一些实现方法,这个专栏我们具体的来通过一些框架实现WebAR效果。关于AR.jsAR.js是一个轻量级的增强现实类JavaScript库,支持基于标记和位置的增强现实。开发人员可以…

python 最小二乘回归 高斯核_从简单数学建模开始:08最小二乘准则的应用(附python代码)...

模型拟合一般来说有这么三种:切比雪夫近似准则极小化绝对偏差之和最小二乘准则这几个原则各有各的适用范围。其中最小二乘准则是比较容易计算的。接下来我将简要的介绍最小二乘准则以及举例说明如何用python实现。最小二乘准则定义:给定某种函数类型 和 …

oracle 时间集合,oracle 日期函数集合(集中版本)第2/2页

oracle 日期函数集合(集中版本)第2/2页更新时间:2009年06月16日 23:45:55 作者:oracle 日期函数网上已经有了不少,特我们跟集中一下,免得大家麻烦。一、 常用日期数据格式1.Y或YY或YYY 年的最后一位,两位或三位SQL&g…

中缀表达式转后缀表达式两位数_再见,正则表达式!

从一段指定的字符串中,取得期望的数据,正常人都会想到正则表达式吧?写过正则表达式的人都知道,正则表达式入门不难,写起来也容易。但是正则表达式几乎没有可读性可言,维护起来,真的会让人抓狂&a…

php 腾讯云 文字识别_腾讯科技(成都)有限公司

成都IT内推圈是由IT行业老兵组建的民间组织,我们希望能为广大IT同仁提供力所能及的帮助,我们不仅提供靠谱的职位,我们更是有温度的圈子!为了帮助更多的朋友寻找到靠谱的内推职位,老农在此号召大家:1. 发布职…

oracle插入性能优化,Oracle- insert性能优化

看见朋友导入数据,花了很长时间都没完成!其实有很多快速的方法,整理下!向表中插入数据有很多办法,但是方法不同,性能差别很大.----1.原始语句drop table t1 purge;create table t1(sid number,sname varchar2(20)) tab…

winscp 自动断开无法连接_winscp教程,winscp教程,看完就学会的winscp教程

作为一个站长,当你的网站流量逐渐变大时,就会发现目前的主机无法满足正常需要,就要更换更高一级的云主机或VPS主机,新手就需要使用WinSCP和Putty,来管理主机。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作…

oracle客户端数据恢复,AnyBackup-Oracle 数据恢复任务恢复到异客户端失败,并提示错误:数据源为空,请检查恢复环境是否授权...

关键字Oracle、数据源适用产品AnyBackup Express 7.0.6 - 7.0.8AnyBackup CDM 7.0.6 - 7.0.8问题描述登录 AnyBackup 管理控制台,依次点击定时数据保护 > 数据恢复 > 新建,新建 Oracle 数据恢复任务,选择恢复数据到异客户端&#xff0c…

linux祖先进程,Linux下的几种特殊进程

1、Linux的登录环境Linux是一个多任务多用户的操作系统,其设计初衷: 就是要达成多用户同时使用单个计算机大的任务。多用户:早期计算机资源紧张,为了让更多的人都可以使用。多任务:服务于多用户,同时提高计算机的吞吐量…

@select注解_SSM框架(十三):Spring框架中的IoC(3)新注解,完全摆脱xml文件

spring中的新注解1、Configuration作用:指定当前类是一个配置类细节:当配置类作为AnnotationConfigApplicationContext对象创建的参数时,该注解可以不写。2、ComponentScan作用:用于通过注解指定spring在创建容器时要扫描的包属性…

element ui 多个子组件_ElementUI 技术揭秘(2) 组件库的整体设计

需求分析当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求。那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需求呢。丰富的 feature&#x…

arraylist线程安全吗_Java的线程安全、单例模式、JVM内存结构等知识梳理

java技术总结知其然,不知其所以然 !在技术的海洋里,遨游!做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!本篇以一些问题开头,请先不看答案,自己思…

【GitHub精选项目】抖音/ TikTok 视频下载:TikTokDownloader 操作指南

前言 本文为大家带来的是 JoeanAmier 开发的 TikTokDownloader 项目,这是一个高效的下载 抖音/ TikTok 视频的开源工具。特别适合用户们保存他们喜欢的视频或分享给其他人。 TikTokDownloader 是一个专门设计用于下载 TikTok 视频的工具,旨在为用户提供一…

python的界面文字翻译_一个把网站全英文转成中文的方法,让你轻松看懂python官网...

近日,在看python官网(英文网站)时,使用了有道翻译工具查看了几个专有名词。无意间,有了是不是可以输入网站地址进行翻译的想法,翻译后的网站地址点击进去后,又是一个什么情况呢?小编…

drools规则引擎技术指南_物联网规则引擎技术

物联网应用程序设计与典型的IT解决方案大不相同,因为它将物理操作技术(OT)与传感器、致动器和通信设备连接起来,并将数字信息技术(IT)与数据、分析和工作流连接起来。在企业环境中,物联网非常复…

linux 2G内存够用吗,不管2G还是6G运存,为什么使用手机时都会先占用一半?

原标题:不管2G还是6G运存,为什么使用手机时都会先占用一半?以前安卓手机最大的缺陷就是运存问题,手机玩着玩着突然就运行内存不足了,为了运行更流畅手机运存从1G到2G…到8G,手机运存越来越大。但大家有没有…

c++ 写x64汇编 5参数_怀念9年前用纯C和汇编写的入侵检测软件

在翻出12年前用C#写的自我管理软件之后,进一步激发了本猫的怀旧情怀。上一篇在此:竟然无意间翻出12年前自己用C#写的程序这不,昨天竟然又找出2010年写的一款Windows系统入侵检测及防御小工具,当时命名是:NtInfoGuy!对于Windows的内部&#xf…

python怎么导入os模块_python之os模块

在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告(从而发送测试报告邮件),经常要对大量文件和大量路径进行操作,这就依赖…

ubuntu复制文件到另一个文件夹_简单介绍一下电脑中的文件或文件夹的复制、移动及删除的操作方式...

大家好,我是波仔,今天又来跟各位学电脑基础的朋友们分享知识,让我们一起来学习吧。复制文件或文件夹在我们日常操作文件或文件夹的过程中,经常会遇到需要复制一些文件或文件夹什么的,下面我们就一起来分享一下常用的几…