[英]Edit table row inline on click of edit in Angular
我有一個表,其中數據正在填充。 每行都有一個編輯鏈接。 我只想在單擊編輯鏈接時編輯特定行。 現在它的'顯示所有行的編輯選項。
我還想在單擊編輯時在輸入框中顯示文本。
這是我的代碼。
<tr *ngFor="let row of backendData.report" class="hover-highlight">
<td class="benchmark_name">
{{row.name}}
</td>
<td>
{{row.value}}
</td>
<td>
{{row.description}}
</td>
<td>
<button *ngIf="enableEdit" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
<button *ngIf="enableEdit" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
<a class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEdit = true">
<i class="fa fa-pencil" uib-tooltip="Edit" tooltip-trigger="mouseenter" tooltip-append-to-body="true" tooltip-placement="left"></i>
</a>
</td>
<td>
</td>
</tr>
我當前的輸出看起來像這樣
這是解決方案
html
<tr *ngFor="let row of backendData; index as i;" class="hover-highlight">
<td class="benchmark_name">
{{row.name}}
</td>
<td>
{{row.value}}
</td>
<td>
{{row.description}}
</td>
<td>
<button *ngIf="enableEdit && enableEditIndex == i" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()">Cancel</button>
<button *ngIf="enableEdit && enableEditIndex == i" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit">Save</button>
<a href="#" class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEditMethod($event, i)">
edit
</a>
</td>
<td>
</td>
</tr>
.ts 文件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
enableEdit = false;
enableEditIndex = null;
backendData = [{
"name": 'Target',
"value": '100',
"description": 'abc'
},
{
"name": 'Size',
"value": '20',
"description": 'def'
},
{
"name": 'Industry',
"value": '40',
"description": 'ghi'
}]
enableEditMethod(e, i) {
this.enableEdit = true;
this.enableEditIndex = i;
console.log(i, e);
}
}
如果您有任何疑問,請告訴我。
您必須在循環中創建索引
然后創建一個長度為 i 的 enableEdit 數組。
然后在單擊事件上,編寫一個函數,該函數采用參數索引 i。
您可以做的是將行的“contenteditable”屬性設置為“true”。 例如 :
默認情況下,HTML 將此設置為 false。
您可以使用 *ngFor 中的“trackBy”獲取表行的當前索引
*ngFor="let post of posts;trackBy:post?.id"
或者您可以將此關鍵字用於當前索引。
在保存或取消時,只需將 td 的 contenteditable 設置為 false。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.