当前位置: 首页 > 工具软件 > ng-zorro-antd > 使用案例 >

ng-zorro-antd0.5x升级到1.8.1或者更高(当前最新9.3.0)

万俟承望
2023-12-01

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() {
    }
})
 类似资料: