前臺Ng-Alain

摘要： 對與Ng-Alain這個前段框架，用了也有一短時間了，對於框架而言確實時很強大，很好，但對於我們而言文件少，就寸步難行，邊研究編寫，時不時的就在 坑 裡爬半天，還不一定爬出來。 問題描述 點選多選框時，選擇是正確的，但是點選表格的其他地方值就變成了 null ，感到...

對與Ng-Alain這個前段框架，用了也有一短時間了，對於框架而言確實時很強大，很好，但對於我們而言文件少，就寸步難行，邊研究編寫，時不時的就在 坑 裡爬半天，還不一定爬出來。

問題描述

點選多選框時，選擇是正確的，但是點選表格的其他地方值就變成了 null ，感到很奇怪，發現官方的就正常，不會出現我這種情況。

想法

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 和點選表格還有在表格中雙擊所觸發的事件不同：

修改後：

public selectHost(e: STChange) {
switch (e.type) {
// 如果是多選框事件，選中主機
case 'checkbox':
this.selectedHosts = e.checkbox;
}
}

完美，沒有問題！！！

總結

在需要這個樣式的時候就 Ctrl+C 、 Ctrl+V 過來了也沒有多看，沒用的程式碼就直接刪掉了，但是在發現問題是往往可能是你感覺 沒用 的哪些程式碼，所有在使用樣式的時候大概看一下，這次沒用到下次就可能用到，要多看，多總結，到在用的時候就會順手許多。