Angular 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

您可以簡單地將 $event 對象傳遞給函數。 在 $event 對象中，您可以通過訪問該屬性來找到該元素。

<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 2

使用*ngIf ，它將顯示/隱藏 div。 使用屬性跟蹤狀態（例如edit波紋管）。 它將保留行索引值。 將其設置為 -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>

打字腳本：

edit = -1;

演示

Answer 3

您可以在編輯功能中傳遞參數

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