ng-zorro-antd中踩過的坑

前端專案中，我們經常會使用阿里開源的元件庫：ant-design，其提供的元件已經足以滿足多數的需求，拿來就能直接用，十分方便，當然了，有些公司會對元件庫進行二次封裝，改造成極具自家風格的產品。

在本系列的文章中，不談高大上的東西，不深究底層原始碼，只分享一些專案中遇到的小問題。

表格（table）

——師傅以為是元件庫的bug，沒想到……

不知道正在閱讀本文的讀者有沒有經歷過：

1. 在使用 <nz-table></nz-table> 的時候，刪除表格的最後一項時，展示“暫無資料”的影象，此後，再向表格中新增資料的時候，發現這個“暫無資料”的影象不消失了。
2. 表格中展示了幾條資料，但是批量刪除了這些資料後（當然，也可以手動的一條一條刪除），“暫無資料”的那張圖並沒有出現。

這個空狀態怎麼老和咱做對呢？就不能好好的滿足我們的預期嗎？別說，還真會，不過，偶然性極高。

1. “暫無資料”影象在極少數的情況下會正常的顯示（有多少呢？可能和再來一瓶的中獎率差不多吧）。

發生這種問題的原因實際上非常簡單，回憶一下我們在刪除和新增的表項時，是不是像下面這樣做的：

<nz-table [nzData]=“itemList”>
    <thead>
        <tr *ngFor=“let item of itemListHead”>
            <td>{{item.label}}</td>
        </tr>
    <tbody>
        <tr *ngFor=“let item of itemList”>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </tbody>
</nz-table>
 

public itemList: any[] = [];
public itemListHead = [
    { label: ‘name’ },
    { label: ‘age’ }
];
add(item: any) {
    this.itemList.push(item);
}

delete(index) {
    this.itemList.splice(index, 1);
}

看起來，這段程式碼並沒有什麼問題，但是要知道一個問題，push() 和 splice()這倆函式是直接在原始陣列上進行操作的，會改變原陣列，但是……想一想，他會改變陣列的引用嗎？不會。

而在angular的設計中，onChanges()

所以，只要想辦法改變引用地址就可以解決上面的問題。

add(item: any) {
    this.itemList.push(item);
    this.itemList = [...this.itemList];
}

delete(index) {
    this.itemList.splice(index, 1);
    this.itemList = [...this.itemList];
}

這裡提供的方法，簡單，迅速，暴力，十分好用。

看完本文，是不是有種豁然開朗的感覺呢？