已解決430363個問題，去搜搜看，總會有你想問的

單擊按鈕即可在 *ngFor 內進行角度內聯編輯和刪除

首頁猿問單擊按鈕即可在 *ngFor...

單擊按鈕即可在 *ngFor 內進行角度內聯編輯和刪除

Html5

慕碼人2483693 2024-01-03 14:46:13

這是我的 DOM 元素。正在從后端獲取數據，我正在使用 *ngFor 來顯示數據。單擊該編輯按鈕時我想要什么，我希望相應行的文本有一個input標簽，并且編輯按鈕更改為保存按鈕。單擊“保存”按鈕后，輸入應該消失。下面是我的 DOM 元素的 html 代碼和圖像。現在，單擊編輯按鈕時，我只是切換editable到true或false，但它也不起作用。<span *ngFor="let body of myLinkBody;let last=last" class="myLinkBody" [class.myLinkBodyLast]="last"> <a [href]="domainURL+body.href" contenteditable="editable">{{body.value}}</a> <div id="editLinkButton"><a (click)="edit($event,body)"></a> </div> <div id="deleteLinkButton"><a></a></div></span>

查看完整描述

2 回答

慕少森

TA貢獻2019條經驗獲得超9個贊

嘗試為 myLinkBody 數組中的每個對象設置一個新屬性，以保持當前狀態，無論其是否正在編輯。

myLinkBody.map(body => { body.currentState="edit"; return body});

并使用額外的標簽輸入字段使用[(ngModel)]。[hidden]在錨標簽和輸入標簽上使用，根據當前狀態顯示和隱藏它們。

<a [href]="domainURL+body.href" [hidden]="body.currentState=='save'">{{body.value}}</a>

<button (click)="edit($event,body,index)">{{body.currentState}}</button>

</span>

在編輯功能中

edit(event,body,index){

if(body.state == 'save')

this.myLinkBody[index].state='edit';

else

this.myLinkBody[index].state='save';

.....your code here

}

示例 stackblitz ：https://stackblitz.com/edit/angular-5hrmfv

反對回復 2024-01-03

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

我已經實現了一個基本片段，它將使用 *ngFor 將示例數據顯示為列表，其中可以通過單擊編輯按鈕來編輯字段。

查看此處的代碼片段：https ://stackblitz.com/edit/angular-rmvkat

實時網址： https: //angular-rmvkat.stackblitz.io/

反對回復 2024-01-03

2 回答
0 關注
167 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

單擊按鈕即可在 *ngFor 內進行角度內聯編輯和刪除

單擊按鈕即可在 *ngFor 內進行角度內聯編輯和刪除

2 回答

添加回答