2 回答

TA貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊
嘗試為 myLinkBody 數(shù)組中的每個(gè)對(duì)象設(shè)置一個(gè)新屬性,以保持當(dāng)前狀態(tài),無(wú)論其是否正在編輯。
myLinkBody.map(body => { body.currentState="edit"; return body});
并使用額外的標(biāo)簽輸入字段使用[(ngModel)]。[hidden]在錨標(biāo)簽和輸入標(biāo)簽上使用,根據(jù)當(dāng)前狀態(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貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
我已經(jīng)實(shí)現(xiàn)了一個(gè)基本片段,它將使用 *ngFor 將示例數(shù)據(jù)顯示為列表,其中可以通過(guò)單擊編輯按鈕來(lái)編輯字段。
查看此處的代碼片段:https ://stackblitz.com/edit/angular-rmvkat
實(shí)時(shí)網(wǎng)址: https: //angular-rmvkat.stackblitz.io/
- 2 回答
- 0 關(guān)注
- 190 瀏覽
添加回答
舉報(bào)