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" />