角4 - 現在の要素を取得していません

Question

ngForを使用してデータをレンダリングしましたが、編集アイコンをクリックしてdivを表示したいのですが、現在の要素を取得できません。

<tr *ngFor="let serviceDetail of serviceDetailsList; let i = index"> 
    <td>{{serviceDetail.serviceName}}</td> 
    <td>{{serviceDetail.serviceVersion}}</td> 
    <td>{{serviceDetail.isLatest}}</td> 
    <td> 
     <div class="showUrl" > 
      <span class="icon-edit" id="i" #editIc (click)="edit()" ></span> 
     </div> 

     <div class="editUrl" id="show" style="display: none"> 
      <input type="text" name="" class="editUrl" #myInputText> 
      <a style="margin: 0 10px;" (click)="sendToServer('save')">Save</a> 

      <a class="urlClass" (click)="sendToServer()">Cancel</a> 
     </div> 
    </td> 
    </tr> 


@ViewChild('editIc') editIc:ElementRef; 
    edit(){ 
    let thisPElem = this.editIc.nativeElement.parentElement; 
    let thisPSibling = thisPElem.nextElementSibling; 
    thisPElem.style.display = 'none'; 
    thisPSibling.style.display = 'block'; 

    console.log(thisPElem); 

    } 

Answer 1

あなたはあなたが単に関数に$イベントオブジェクトを渡すことができます編集機能

<span class="icon-edit" id="i" #editIc (click)="edit(i)" ></span> 
//or 
<span class="icon-edit" id="i" #editIc (click)="edit(serviceDetail)" ></span> 

Answer 2

に引数を渡すことができます。 $イベントオブジェクトの内部では、プロパティにアクセスすることで要素を見つけることができます。

<tr *ngFor="let serviceDetail of serviceDetailsList; let i = index"> 
    <td>{{serviceDetail.serviceName}}</td> 
    <td>{{serviceDetail.serviceVersion}}</td> 
    <td>{{serviceDetail.isLatest}}</td> 
    <td> 
     <div class="showUrl" > 
      <span class="icon-edit" id="i" #editIc (click)="edit($event)" ></span> 
     </div> 

     <div class="editUrl" id="show" style="display: none"> 
      <input type="text" name="" class="editUrl" #myInputText> 
      <a style="margin: 0 10px;" (click)="sendToServer('save')">Save</a> 

      <a class="urlClass" (click)="sendToServer()">Cancel</a> 
     </div> 
    </td> 
</tr> 

// function in your class 
edit($event){ 
    let thisPElem = $event.target; 
    let thisPSibling = thisPElem.nextSibling; 
    thisPElem.style.display = 'none'; 
    thisPSibling.style.display = 'block'; 

    console.log(thisPElem); 
} 

Answer 3

*ngIfを使用すると、divを表示/非表示にします。プロパティの状態を追跡してください（例：）。行インデックス値を保持します。それを-1に戻して戻ってください。

HTML：

<div class="showUrl" *ngIf="edit !== i"> 
    <span class="icon-edit" id="i" #editIc (click)="edit=i" ></span> 
</div> 

<div class="editUrl" *ngIf="edit === i" id="show"> 
    <input type="text" name="" class="editUrl" #myInputText> 
    <a style="margin: 0 10px;" (click)="sendToServer('save');edit = -1">Save</a> 

    <a class="urlClass" (click)="sendToServer();edit = -1">Cancel</a> 
</div> 

TyepScript：

edit = -1; 

DEMO