第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單擊按鈕即可在 *ngFor 內(nèi)進行角度內(nèi)聯(lián)編輯和刪除

單擊按鈕即可在 *ngFor 內(nèi)進行角度內(nèi)聯(lián)編輯和刪除

慕碼人2483693 2024-01-03 14:46:13
這是我的 DOM 元素。正在從后端獲取數(shù)據(jù),我正在使用 *ngFor 來顯示數(shù)據(jù)。單擊該編輯按鈕時我想要什么,我希望相應(yīng)行的文本有一個input標簽,并且編輯按鈕更改為保存按鈕。單擊“保存”按鈕后,輸入應(yīng)該消失。下面是我的 DOM 元素的 html 代碼和圖像?,F(xiàn)在,單擊編輯按鈕時,我只是切換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條經(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


查看完整回答
反對 回復 2024-01-03
?
梵蒂岡之花

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/


查看完整回答
反對 回復 2024-01-03
  • 2 回答
  • 0 關(guān)注
  • 164 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號