Angular的MVVM實踐做法（顯示資料篇）

先前的文章 Angular MVVM 取得資料篇 有寫參考了眾多的書籍以後總結Angular在取得資料時候分成Model->Data(Service)->Component三層，這篇文章會接下去顯示資料的部分。顯示資料因為Angular是MVVM架構可以雙向綁定，相對的容易許多。

取得的資料在哪

根據之前這種三層的資料取得寫法，通常是在Component裡面訂閱Data Services，然後取得訂閱的Data Service以後再裡面ngOnDestroy用一個Subject把所有訂閱關閉。

取得的訂閱會放在Component的記憶體中的某一個變數，這裡需要注意一點是JavaScript的框架很難處理的部分是頁面刷新時訂閱的變數就不見了，要重新取得。在資料筆數不多或者內容不佔空間下善用sessionStorage是個好實踐。

如果取得的是多筆資料，則會是一個interface的陣列，如果只是取得一筆資料，比如說訂單的Detail，那就會只是一個interface的物件。一個interface的物件裡面可以包含另一個interface的陣列，比如說：

interface OrderDetail裡面包涵 Memos: OrderMemo[]的定義，當然後端在餵資料就要照格式，JSON轉物件才不會有null。

顯示資料

顯示資料第一個最重要的點在於null的判斷，如果物件是null但硬是要{{綁定}}到HTML Template，那顯示出來的頁面會變得很混亂，且會當掉。

所以善用 ?運算子 或者 *ngIf=”data” 這類的，有時IDE會出現 ?運算子的警告，明明就有可能是null值，但會誤判該值不可能null，這個要怎麼辦？不想看到10~數百個警告，最簡單就是將那個型別宣告成 dataType | null;就可以了。

在命名方法建議使用駝峰法，開頭小寫中間有大寫，比如iKnowHowToDo、getData這類的，JetBrain的WebStorm就不會一直彈出警告說命名不合原則。

觸發

通常我會在一個DataService有一個getData(request:RequestInterface)，然後在Component處理好request物件，傳到getData裡面去。處理request的部分可以寫Test確保處理的request都是正確的，也可以手動測試。

getData接收到request以後，看是要用HTTP Get還是HTTP Post，將資料傳到後端，後端處理完，丟回資料到getData的列舉型別中。然後Component訂閱這個getData，將訂閱收到的data => {一些判斷加上放到變數中}。

放到變數以後這個變數要與HTML Template中的*ngIf有雙向綁定，也就是如果當變數不是null的時候雙向綁定會讓資料顯示出來。

顯示資料的一些方法

可以使用額外的Component來顯示資料，把data!:dataInterface[]，丟到Component讓Component顯示出來資料。

或者直接在HTML Template裡面寫 *ngFor 列舉資料，如果取得的資料是單一一比如data!:dataInterface沒有[]陣列的話，就直接用{{綁定欄位}}來顯示資料。

當然在所有顯示資料之前都要有一個<div *ngIf=”data”>類似的，不然data如果是null，不管是列舉資料還是綁定資料都會爆掉。

結論

使用這種方式的話，取得資料的程式碼會很容易寫，且相當容易閱讀，顯示資料也會相當方便修改，也相當方便處理資料與例外判斷。

不要忘了在Data Service中做到API呼叫的error例外狀況判斷，這樣程式就可以萬無一失了。

這樣寫測試的人會很感謝自己。