ng-zorro-antd中踩過的坑

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

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

表格（table）

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

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

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

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

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

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

<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];
}

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

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