Ng-Zorro 使用中遇到的问题

ng-zorro的组件问题,现在从18年02月24日开始记录,但是很多样式问题是之前遇到的,也一并记录 于 02 月 24 日.

(所有的CSS均为SCSS)

有些问题可能会随着ng-zorro的版本迭代从而消失,同时也会产生另外的一些问题,发现后如果能解决我会记录下来.

1.ng-table 分页手动更改页数出现问题

报错信息 ExpressionChangedAfterItHasBeenCheckedError

解决办法,在nz-table 中绑定[nzPageIndex]=xxx 即可

2.ng-table 分页手动更改页数出现问题

    nzPageIndexChange 会在手动更改页数的时候触发，比如页面的列表有查询功能时，
需要在查询的时候将页数归1，会触发该事件，若想不触发，请使用nzPageIndexChangeClick。

3.modalService modal框垂直居中

因为我是将弹出框的方法封装的,所以使用的是open方法

wrapClassName:'vertical-center-modal',

这个样式就是我自己写的,大概内容:

//注意样式表的加载顺序.

.vertical-center-modal {

    display:flex;

    align-items:center;

    justify-content:center;

    width:280px;

    margin:0 auto;

    z-index:9990;

    .ant-modal {

        top:0;

    }

}

4.checkbox组件没有与文本对齐

解决办法,给label加样式

.label-r{

    .ant-checkbox-inner{

        top: -2px;

    }

}

5.nz-timepicker 时间赋值

如果数据库拿到的数据是hh:mm:ss 格式
比如

{endTime: "13:30:20", startTime: "12:00:20"}

这种格式无法直接显示在nz-timepicker上,因为不是完整的日期格式,完整的日期格式需要加上年月日
比如

let data = '2000/1/1' + " "+ endTime;
new Date (data);    //赋值给绑定的变量即可显示在页面上