所以我有一個資料被加載到表中,用戶可以單擊并向單元格添加輸入,什么是以及我們如何檢查表資料是否有更改?
例如,如果用戶單擊單元格并添加了一個輸入,它應該回傳 TRUE,因為如果用戶只是單擊單元格并且沒有對輸入進行任何更改或沒有更新任何欄位則回傳 FALSE。
如果有任何值發生更改,我可以將行資料傳遞給 edit(),然后將其與現有的 dataSource 進行比較。
因此它將檢查該行是否有新的變化,并將其與資料源中的原始資料進行比較。
我想檢測資料源的任何變化
感謝您的幫助和想法。
#閃電戰
https://stackblitz.com/edit/am-all-imports-65vtbu?file=app/app.component.html
#ts 代碼
options: string[] = ['position', 'name', 'weight', 'symbol', 'symbol2'];
dataSource = ELEMENT_DATA;
edit(index: number, column: string) {
this.editableColumn = column;
this.editableIndex = index;
}
showInput(index: number, column: string) {
return this.editableColumn === column && this.editableIndex === index;
}
showValue(index: number, column: string) {
return this.editableColumn !== column || this.editableIndex !== index;
}
reset() {
this.editableColumn = '';
this.editableIndex = null;
}
}
#html代碼
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td
mat-cell
*matCellDef="let element; let i = index"
(click)="edit(i, 'position')"
>
<span *ngIf="showValue(i, 'position'); else editPlace">{{
element.position
}}</span>
<ng-template #editPlace>
<mat-form-field>
<input
matInput
placeholder="Placeholder"
(blur)="reset()"
appFocusOnLoad
[(ngModel)]="element.position"
/>
</mat-form-field>
</ng-template>
</td>
</ng-container>
uj5u.com熱心網友回復:
如果您需要另一種方法,這是一種解決方法。這個想法是存盤您正在編輯的行的狀態,并在進行編輯后檢查是否有變化。
這是代碼。希望能幫助到你!
還有一件事,請注意,您應該在number欄位中執行決議和驗證,例如,因為在對輸入進行編輯后 astring被存盤而不是 a number。
uj5u.com熱心網友回復:
根據您的要求,我想最好的解決方案是對輸入應用更改事件并保留資料的原始副本。這樣,您將知道是否有人對您的表格進行了任何更改以及更改為什么。我為此創建了一個 stackblitz,你可以看看這里。
如果它解決了您的問題,請確保將其標記為答案。快樂編碼:)
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/503667.html
標籤:javascript 数组 有角度的 打字稿 目的
上一篇:如何將行轉置為值陣列中的列?
下一篇:編輯每個物件陣列的鍵和值
