Javascript 角度4-不获取当前元素

我正在使用

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);

  }

{{serviceDetail.serviceName}
{{serviceDetail.serviceVersion}
{{serviceDetail.isLatest}
拯救
取消
@ViewChild（'editIc'）editIc:ElementRef；
编辑（）{
让thisPElem=this.editIc.nativeElement.parentElement；
让thisPSibling=thisplem.nextElementSibling；
thisPElem.style.display='none'；
thisPSibling.style.display='block'；
控制台日志（thisPElem）；
}

您可以在编辑函数中传递参数

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

//或

您只需将$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);
}

{{serviceDetail.serviceName}
{{serviceDetail.serviceVersion}
{{serviceDetail.isLatest}
拯救
取消
//你在班上的作用
编辑（$event）{
让thisPElem=$event.target；
让thisPSibling=thisplem.nextSibling；
thisPElem.style.display='none'；
thisPSibling.style.display='block'；
控制台日志（thisPElem）；
}

使用

*ngIf

，它将显示/隐藏div。使用属性跟踪状态（例如

edit

bellow）。它将保留行索引值。将其设置为-1返回

HTML:

---

编译时或控制台上有错误吗？编译或控制台中没有错误。每次单击另一个元素时都会获取第一个元素。添加完整代码您是否有理由尝试直接进行DOM操作，而不是修改状态并让Angular为您更新DOM？@GregL这是一个很好的观点。ngIf将更完美地完成这项工作，而不是隐藏节目

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