Angular TypeScript 框架学习笔记

版本

8.0

TypeScript

3.4.5

接口对象

必须声明在组件配置声明至上，

import

声明

必须指定参数数据类型

// 定义接口数据类型
// 相当于定义了一个全局obj对象
// 并定义每个键值的数据类型
// 方便内部参数继承
interface WebData {
StartTime: null | number;
EndTime: null | number;
Department: null | number;
BusinessType: null | number;
}

继承

在

class

// class 内声明变量，数据类型为 webData 接口的数据格式
// 相当于在 class 内声明了一个全局 obj 对象
// 必须设定默认值
SearchData: WebData = {
StartTime: null,
EndTime: null,
Department: null,
BusinessType: null
};

class

class

不主动声明变量类型

// 数据类型默认为 any
dateFormat = 'yyyy-MM-dd';

主动声明变量类型

SelectionDepartmentSelectionValue: string | number = 'any';

数组变量声明方式

SelectTimePeriodTypeDataList: Array<{ id: string, label: string }> = [
{
id: 'any',
label: '不限时间'
}, {
id: 'ToDay',
label: '今天'
}, {
id: 'YesterDay',
label: '昨天'
}, {
id: 'TheWeek',
label: '本周'
}, {
id: 'LastWeek',
label: '上周'
}, {
id: 'TheMonth',
label: '本月度'
}, {
id: 'LastMonth',
label: '上月度'
}, {
id: 'TheQuarter',
label: '本季度'
}, {
id: 'LastQuarter',
label: '上季度'
}, {
id: 'TheYear',
label: '本年度'
}, {
id: 'LastYear',
label: '上年度'
}
];

修改 class 内变量值

this

class

export class SearchConditionComponent implements OnInit {
// class 内声明变量，数据类型为 webData 接口的数据格式
// 相当于在 class 内声明了一个全局 obj 对象
// 设定默认值
SearchData: WebData = {
StartTime: null,
EndTime: null,
Department: null,
BusinessType: null
};

// 开始时间
StartingTime: Date = new Date();
// 结束时间
EndTime: Date = new Date();

dateFormat = 'yyyy-MM-dd';
// 开始时间
StartingTime: Date = new Date();
// 结束时间
EndTime: Date = new Date();

constructor(private fb: FormBuilder) {
}

ngOnInit(): void {
this.StartingTime = setHours(this.StartingTime, 0);
this.StartingTime = setMinutes(this.StartingTime, 0);
this.StartingTime = setSeconds(this.StartingTime, 0);
this.EndTime = setHours(this.EndTime, 23);
this.EndTime = setMinutes(this.EndTime, 59);
this.EndTime = setSeconds(this.EndTime, 59);
//
this.SearchData.StartTime = getUnixTime(this.StartingTime);
this.SearchData.EndTime = getUnixTime(this.EndTime);
console.log(this.SearchData);
}

}

表单

input

双向绑定

<input nz-input placeholder="" autocomplete="off" nzSize="small" [(ngModel)]="SearchData.CustomerName" />

转载于:https://my.oschina.net/u/3756690/blog/3070819

• 点赞
• 收藏
• 分享
• 文章举报