前台Ng-Alain

对与Ng-Alain这个前段框架,用了也有一短期了,对于框架而言确实时很强大,很好,但对于咱们而言文档少,就步履维艰,边研究编写,时不时的就在里爬半天,还不必定爬出来。git

问题描述

clipboard.png

点击多选框时,选择是正确的,可是点击表格的其余地方值就变成了null,感到很奇怪,发现官方的就正常,不会出现我这种状况。github

想法

  1. 首先想到的是去看文档,可是很遗憾,没有找到文档
  2. 还好有github能够看到示例代码,比较哪里与官方的不同。

解决

发现官方上的 (change)事件是这样写的:框架

stChange(e: STChange) {
    switch (e.type) {
      case 'checkbox':
        this.selectedRows = e.checkbox;
        this.totalCallNo = this.selectedRows.reduce((total, cv) => total + cv.callNo, 0);
        this.cdr.detectChanges();
        break;
      case 'filter':
        this.getData();
        break;
    }
  }
思考:为何要这样写,这样写的缘由是什么?

在控制台打印了一下e,发现原来鼠标点击checkbox和点击表格还有在表格中双击所触发的事件不一样:this

clipboard.png

修改后:spa

public selectHost(e: STChange) {
        switch (e.type) {
            // 若是是多选框事件,选中主机
            case 'checkbox':
                this.selectedHosts = e.checkbox;
        }
    }

完美,没有问题!!!code

clipboard.png

总结

在须要这个样式的时候就Ctrl+CCtrl+V过来了也没有多看,没用的代码就直接删掉了,可是在发现问题是每每多是你感受没用的哪些代码,全部在使用样式的时候大概看一下,此次没用到下次就可能用到,要多看,多总结,到在用的时候就会顺手许多。事件

相关文章
相关标签/搜索