Javascript 如何在angular 5中选择循环中的dom元素

我是个新手，每天都在学习。我正在angular 5中制作积垢，并且进展顺利。我只是陷入了一个我可以用jquery解决的小问题，但我想用角度的方式来解决它

这是我的积垢

默认情况下，输入框处于禁用状态。我想要的是，当我单击“编辑”时，它应该启用，并且我只需要启用相邻的输入，而不是全部

这就是我迄今为止所尝试的

home.component.html

<div class="container color-dark">
  <div class="col">
    <p>Add a bucket list item</p>
  </div>
  <div class="col">
    <p>Your bucket list ({{itemscount}})</p>
  </div>
</div>
<div class="container color-light">
  <div class="col">
    <p class="sm">Use this form below to add a new bucket list goal. What do you want to accomplish in your life?</p>

    <form>
      <input type="text" class="txt" name="item" placeholder="{{goalText}}" [(ngModel)]="goalText">
      <br><span>{{ goalText }}</span><br>
      <input type="submit" class="btn" [value]="btnText" (click)="additem()">
    </form>
  </div>
  <div class="col">
    <p class="life-container" *ngFor = "let goal of goals; let i = index" >
      <input type="text"  value=" {{ goal }}" [disabled]="editable" #goalInput>
      <span class="edit_btn" (click)="edititem(i)">{{edit_btn_txt}}</span>
      <span class="delete_btn" (click)="removeitem(i)">Delete</span>
    </p>
  </div>
</div>

当我单击编辑按钮时，第一个框已启用写入，但它只工作一次。它不适用于其他盒子。我如何处理这个问题

提前谢谢。

试试这个

<p class="life-container" *ngFor = "let goal of goals; let i = index" >
  <input type="text"  value=" {{ goal }}" [disabled]="i != selectedIndex" #goalInput>
  <span class="edit_btn" (click)="edititem(i)">{{edit_btn_txt}}</span>
  <span class="delete_btn" (click)="removeitem(i)">Delete</span>
</p>

---

下面是使用ViewChildren的另一个解决方案：

@ViewChildren('goalInput') pizzaInput;

edititem(i){
     this.pizzaInput.toArray()[i].nativeElement.disabled = false;
}

---

@Eliseo感谢您的回答，但它不起作用，另一个问题是我不明白这是什么类型的代码，因为这不是引用angular中任何元素的方法。让我试试这个。感谢您的回答，它起作用了，但您能给我任何其他解决方案，如使用viewchild、elementref、，查看孩子们。？检查我的第二个答案抱歉，@Dev。我以为那个目标是个目标。（不是字符串）这适用于我的场景，我需要在单击时切换，并使用三元语句函数（index）{this.toggle==index？this.toggle=-1:this.toggle=index；}

selectedIndex: number;
 constructor() { 
    this.selectedIndex = -1;
 }


edititem(i){
    this.selectedIndex = i;
}

@ViewChildren('goalInput') pizzaInput;

edititem(i){
     this.pizzaInput.toArray()[i].nativeElement.disabled = false;
}