ng-zorro-antd0.5x升级到1.8.1或者更高（当前最新9.3.0）
package.json文件直接更改版本号
- "ng-zorro-antd": "^0.6.15",
+"ng-zorro-antd": "^1.8.1",
安装
npm install
成功升级之后需要按报错依次更改代码，大概有以下几种（不全，仅供参考）：
所有常量属性不用变量表示方法
- [nzSize]="'large'" [nzType]="'default'"
+ nzSize="large" nzType="default"
nz-input 输入框组件
nz-input标签更换为input标签，并增加nz-input属性
nzDisabled属性更换为disabled
nzPlaceHolder属性更换为placeholder
nzBlur事件更换为blur
- <nz-input [(ngModel)]="searchName" [nzPlaceHolder]="'请输入企业名称'" [nzDisabled]="operationType=='detail'" (nzBlur)="companyNameChecker()"></nz-input>
+ <input nz-input [(ngModel)]="searchName" [placeholder]="'请输入企业名称'" [disabled]="operationType=='detail'" (blur)="companyNameChecker()">
nz-table 表格组件
nzDataSource属性更换为nzData，
nzIsPagination属性更换为nzShowPagination
nzCustomNoResult属性更换为nzNoResult
- <nz-table #nzTable [nzDataSource]="priceList" [nzIsPagination]="false" [nzLoading]="_isSpinning" [nzCustomNoResult]="_isSpinning">
+ <nz-table #nzTable [nzData]="priceList" [nzShowPagination]="false" [nzLoading]="_isSpinning" [nzNoResult]="_isSpinning">
nzCheckbox 选择框组件
nzCheckbox属性更换为nzShowCheckbox
ngModel属性更换为nzChecked
ngModelChange属性更换为nzCheckedChange
- <th nz-th [nzCheckbox]="true">
- <label nz-checkbox [(ngModel)]="_checked" (ngModelChange)="checkoutAll($event)"></label>
- </th>
+ <th nz-th nzShowCheckbox [(nzChecked)]="_checked" (nzCheckedChange)="checkoutAll($event)"></th>
nz-datepicker 日期选择器组件
nzCheckbox属性更换为nzShowCheckbox
nzDisabledDate属性更换为nzDisabledTime
- <nz-datepicker [(ngModel)]="executionTime" [nzDisabledDate]="_disabledDate"...
+ <nz-date-picker [(ngModel)]="executionTime" [nzDisabledTime]="_nzDisabledTime"...
nz-pagination 分页组件
nzShowTotal属性由布尔值变成TemplateRef
<nz-pagination [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzShowTotal]="totalTemplate" [nzTotal]="tbodyTotal.length"
(nzPageIndexChange)="pageIndexChange($event)"></nz-pagination>
<ng-template #totalTemplate let-total>
共 {{total}} 条
</ng-template>
nz-table-divider 分割线组件
nz-table-divider属性更换为nz-divider标签，并增加nzType属性
- <span nz-table-divider></span>
+ <nz-divider nzType="vertical"></nz-divider>
nz-icon 图标组件
class属性改为nzType，且去掉antion-，并增加nz-icon属性，增加nzTheme属性
- <i class="anticon anticon-menu-fold autoMenu">
+ <i nz-icon nzType="menu-fold" nzTheme="outline"></i>
nz-Modal 模态框组件
所有属性前增加nz且驼峰写法
nMods.confirm({
- title: '电价已保存成功!',
+ nzTitle: '电价已保存成功!',
- content: '<b>您是否要继续执行该范围内其他等级电压?</b>',
+ nzContent: '<b>您是否要继续执行该范围内其他等级电压?</b>',
- okText: '继续',
+ nzOkText: '继续',
- onOk() {
+ nzOnOk() {
}
})
