angular 8.1.0 系统中使用ng-zorro-antd 8.5.2的相关问题

ng-zorro-ant是angular官方推荐的一款国内的开源组件，通常情况下非常好用，但是遇到一些细致的要求的时候，就需要自己动手解决一些问题了。

比如今天就遇到领导要求在日期选择框中选择日期以后自动把时间给选中，如果是普通的时间框的话，比如这样

就可以直接按照官方给的api直接进行修改使用[nzShowTime]

但是很可惜，使用的是range-picker，也就是这样

官方虽然在api里写上了

nzShowTime 里有nzDefaultOpenValue 但是实测在代码中加入nzDefaultOpenValue对于range-picker来说并没有任何作用

所以想通过官方api直接搞定是不行的，只能通过事件进行取巧，达到目的

直接上代码:

<nz-range-picker 
[nzShowTime]="{ nzFormat: 'HH:mm'}"
nzFormat="yyyy-MM-dd HH:mm"
[nzAllowClear]="'false'" 
[(ngModel)]="allDate"
(ngModelChange)="onChange($event)"
(nzOnCalendarChange)="onChange($event,'waite')"
[nzPlaceHolder]="['播发开始时间','播发结束时间']">
</nz-range-picker>

关注重点，里面有两个事件，一个是(ngModelChange)，另一个是(nzOnCalendarChange)。根据官方api描述，前者是时间发生变化时的回调，后者是待选日期发生变化的回调。简而言之就是前者只要时间和日期改变了就会触发，后者只会在日期改变的时候会触发。所以我们就在(nzOnCalendarChange)这个事件上做做文章。

目前的情况是，只要选中了时间，会自动把时间选择为此时此刻

所以思路就是在点击日期的那一刻也就是触发(nzOnCalendarChange)事件的时候，把日期的时分改为自己想要的时间

代码如下

onChange($event,type?){//日期选择框
    if(type){
      this.allDate = []
      this.trueData.startTime = ''
      this.trueData.endTime = ''
      $event[0]=this.Format(moment($event[0]).set({'hours':0,'minute': 0, 'second': 0}))
      if($event.length>1){
        $event[1]=this.Format(moment($event[1]).set({'hours':23,'minute': 59, 'second': 0}))
      }
    }
    if($event.length>1){
      this.trueData.startTime = this.Format($event[0])
      this.trueData.endTime = this.Format($event[1])
    }
    this.allDate = $event
  }

Format(time){//返回指定类型的日期
return moment(time).format('YYYY-MM-DD HH:mm')
}

其中$event是事件的返回值，是一个数组，我们直接修改返回值；moment是一个开源的js库，非常好用。

然后再把值赋给绑定的的allDate，这样页面的展示和数据就都是我们想要的了

---

2020-11-02

最近遇到了两个问题，一个是使用localStorage中的问题，还有一个是Inpot输入框的相关问题

先说localStorage

前阵子领导对以前的一个项目增加了一个小需求，不过要的比较急，第二天就要，提需求的时候已经下午四点了

然后就开始做了，需要做一些假数据放到localStorage里，然后编辑修改本地的数据，假装是从后台拿的

因为有模板，所以做起来很快，然后页面都构建完成以后，开始使用localStorage的时候遇到了一个问题

数据结构是这样的

data:[
    {
        tite:xxx,url:xxx,unit:xxxx
    },
    {
        tite:xxx,url:xxx,unit:xxxx
    },
    ...
]

使用foreach然后编辑其中一条，然后发现存储在localStorage中的数据并没有变化,如下代码所示

     this.allData.forEach((res,ind)=>{
         if(res.id==this.saveData.id){
             res = this.saveData
         }
     })

我思考了很久，用了很多测试的方法， 发现都不能改变这条数据。

最后没有办法的办法就是记录那个数据的index，然后this.allData[index]=this.saveData，这样才改变了localStorage中的数据。

到现在也不知道为什么不能够直接赋值改变localStorage中的数据

现在来讲第二个，input输入框的事情。

现在一直用angular的框架，然后配合上ng-zorro-ant的前端组件，开发起来很快

刚刚有个需求，就是指定某个输入框只能输入数字，而且小数点也不行，然后就开始着手做了

根据以往的经验，直接在onModelChange或者keydown的时候把值改变就行

<input nz-input [(ngModel)]="saveData.gatherInterval" (blur)="inputChange()" (ngModelChange)="updateValue($event)" style="width: 50px;margin-right: 10px;">

const reg = /^(0|[1-9][0-9]*)(\[0-9]*)?$/;
    if ((!isNaN(+value) && reg.test(value))||value == 0) {
      this.saveData.gatherInterval = value;
    }

结果发现并不行,输入字母还是畅行无阻
后来根据官网的一个输入框模板更改，发觉首先第一点，html页面上的input不能使用双向绑定模式，第二，要在输入框绑定的值改变以后，通过nativeElement把值赋回输入框,也就是如下

    <input #inputElement nz-input [ngModel]="saveData.gatherInterval" (blur)="inputChange()" (ngModelChange)="updateValue($event)" style="width: 50px;margin-right: 10px;">
    const reg = /^(0|[1-9][0-9]*)(\[0-9]*)?$/;
    if ((!isNaN(+value) && reg.test(value))||value == 0) {
      this.saveData.gatherInterval = value;
    }else{

    }
    this.inputElement!.nativeElement.value = this.saveData.gatherInterval

---

2021-1-7更新

工作中有一个需求就是需要用到checkbox组件

现在这个需求是ngModel绑定的值是一个0和1的值，而组件绑定传递的值是个布尔值，我曾想直接在checkTime这个事件内部直接给绑定的值赋值为0和1

但是这样咋一看没有什么问题，但是实际上有问题，就是页面点击checkbox的时候，从选中状态变成非选中转态的时候需要点击两次才行。

这个问题想了很久都没有想到为什么，后面想清楚了，ngzorro组件官方文档里

绑定给的是布尔值，而我硬生生改成了0和1，为什么在非选中状态改为选中状态，也就是false变成true的时候没有问题呢，因为0也可以看成是false，但是1却不能看成true，所以在组件内部对绑定的值为1的时候做了处理，变成了true，然后再点击一次，true变成了false，页面上才变成了非选中状态，函数内部的报错不会出错，所以页面上也没对应的错误提示。

这个事情告诉我，要仔细阅读组件的值的规定，一旦使用了与规定不同的值就可能会出现各种奇怪的错误。

第二个问题是验证的问题，或者说判定问题

这个框有两个判定条件，必填，不能为0

代码如下

if(this.intervalTime==null||this.intervalTime==0||this.intervalTime==''){
        intervalMessage = '播发间隔不能为0或空'
   }

代码正常工作，在不填，为0，以及填了又清空的情况下都会有对应的错误提示

后面想简写，写成这样

this.intervalTime==null||0||''

按理来说没有问题的，但是页面没有正常工作，表现的是不填的情况下并没有错误提示，但是不填的情况下这个值是为Null啊，百思不得其解，后面单独把null列出来，改成这样

this.intervalTime==null||this.intervalTime==(0||'')

代码就正常工作了，很奇怪的问题。

---

2021-5-14 15:44

倘若想改变组件的样式，例如

<div class="popup">
    <div class="popup-content">
      <nz-tabset [nzCentered]="true" class="tabset">
        <nz-tab nzTitle="AIS信息">
          1
        </nz-tab>
        <nz-tab nzTitle="当前航次">
          2
        </nz-tab>
      </nz-tabset>
    </div>
  </div>

想改变nz-tab选中状态的字体颜色等，在css中

.popup-content{
    /deep/ nz-tabset{
        .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
            color: #035ADE;
            font-weight: bold;
        }
    }
}