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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

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

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

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


查看完整回答
反對(duì) 回復(fù) 2024-01-03
?
梵蒂岡之花

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/


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

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