2 回答

TA貢獻2019條經(jīng)驗 獲得超9個贊
嘗試為 myLinkBody 數(shù)組中的每個對象設(shè)置一個新屬性,以保持當前狀態(tài),無論其是否正在編輯。
myLinkBody.map(body => { body.currentState="edit"; return body});
并使用額外的標簽輸入字段使用[(ngModel)]。[hidden]在錨標簽和輸入標簽上使用,根據(jù)當前狀態(tài)顯示和隱藏它們。
<span *ngFor="let body of myLinkBody;let last=last;let i=index" class="myLinkBody" [class.myLinkBodyLast]="last">
<a [href]="domainURL+body.href" [hidden]="body.currentState=='save'">{{body.value}}</a>
<input type="text" [(ngModel)]="myLinkBody[i].name" [hidden]="body.currentState=='save'"/>
<button (click)="edit($event,body,index)">{{body.currentState}}</button>
<div id="deleteLinkButton"></div>
</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

TA貢獻1900條經(jīng)驗 獲得超5個贊
我已經(jīng)實現(xiàn)了一個基本片段,它將使用 *ngFor 將示例數(shù)據(jù)顯示為列表,其中可以通過單擊編輯按鈕來編輯字段。
查看此處的代碼片段:https ://stackblitz.com/edit/angular-rmvkat
實時網(wǎng)址: https: //angular-rmvkat.stackblitz.io/
- 2 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報