最近在工作中使用angular产徊，組件庫使用ng-zorro-antd，邊學邊用蜀细。在寫表格組件的時候發(fā)現(xiàn)舟铜，點擊新增、刪除就奠衔，數(shù)據(jù)改變谆刨，表格卻沒有更新塘娶。
代碼如下：
<a (click)="addRow(item)">新增一列</a>
<nz-table
#basicTable
class="form-table"
[nzBordered]="true"
[nzData]="fields"
[nzShowPagination]="false">
<thead>
<tr>
<th>值的編號</th>
<th>字段</th>
<th>操作</th>
</tr>
</thead>
<tbody cdkDropList (cdkDropListDropped)="drop($event, fields)">
<!-- <tr *ngFor="let data of fields, let i = index" cdkDrag> -->
<tr *ngFor="let data of basicTable.data, let i = index" cdkDrag>
<td>值{{ i + 1 }}</td>
<td>{{ data.fields }}</td>
<td>
<a (click)="deleteRow(item, i, index, data.$sortOperation)">刪除</a>
</td>
</tr>
</tbody>
</nz-table>
對表格行數(shù)據(jù)遍歷有2種寫法，如下：
// 寫法1
<tr *ngFor="let data of fields, let i = index" cdkDrag>
// 寫法2
<tr *ngFor="let data of basicTable.data, let i = index" cdkDrag>
如果采用寫法1
寫法是官網(wǎng)示例的寫法之一
點擊新增時痊夭，數(shù)據(jù)push進去了刁岸，但是表格沒有新增一條
addRow(item) {
item.fields.push({
...cloneDeep(fieldsGroup),
add_id: addId,
});
}
但使用如下寫法，點擊新增時生兆，數(shù)據(jù)push進去了难捌，但是表格沒有成功顯示新增
addRow(item) {
item.fields = [
...item.groupByFields,
{
...cloneDeep(fieldsGroup),
add_id: addId,
},
];
}
同理刪除的時候也是如此：
點擊刪除按鈕的時候，使用splice刪除一行鸦难，該數(shù)據(jù)已經(jīng)刪除，但表格頁面數(shù)據(jù)沒有消失
deleteRow(item, index, tableIndex, sortOperation) {
item.fields.splice(index, 1);
}
但是如果使用filter员淫，將過濾后的結(jié)果重新賦值合蔽，表格成功刪除一條
deleteRow(item, index, tableIndex, sortOperation) {
item.fields = item.fields.filter(item => item.$sortOperation !== sortOperation);
}
另外，如果只用表格拖拽功能時介返，寫法1也不能成功拖拽表格順序拴事。
如果采用寫法2
如果采用寫法2，上面的2中寫法都可以實現(xiàn)效果圣蝎。
分析
查找ng-zorro-antd源碼刃宵，發(fā)現(xiàn)其中是這么寫的：當nzData發(fā)生變化的時候重新渲染。
ngOnChanges(changes: SimpleChanges): void {
if (nzData) {
this.nzData = this.nzData || [];
this.nzTableDataService.updateListOfData(this.nzData);
}
}
查找發(fā)現(xiàn)
當Angular檢查組件的輸入屬性以進行更改時徘公，它（基本上）===使用臟檢查牲证。對于數(shù)組，這意味著對數(shù)組引用（僅）進行臟檢查关面。由于引用沒有改變坦袍，ngOnChanges()因此不會被調(diào)用。
OnChanges只對輸入的基本數(shù)據(jù)類型起作用等太，而引用數(shù)據(jù)類型不會觸發(fā)OnChanges方法捂齐。
當使用寫法1的時候，由于是引用數(shù)據(jù)類型缩抡，對表格行數(shù)據(jù)進行操作奠宜，不會觸發(fā)OnChanges方法，是不會觸發(fā)表格組件的重新渲染的瞻想，但是重新賦值改變了nzData的引用压真，會觸發(fā)OnChanges方法。
ng-zorro-antd官網(wǎng)使用寫法1是因為其數(shù)據(jù)結(jié)構(gòu)簡單内边，這個問題就不會出現(xiàn)榴都。在自己的工作中，數(shù)據(jù)層級多漠其，問題出現(xiàn)嘴高。
