如何在角度为 5 的循环中选择 dom 元素

Question

我是 angular 的新手，每天都在学习。我正在制作角度为 5 的 crud，并且进展顺利。我只是遇到了一个可以使用 jquery 解决的小问题，但我想以有角度的方式解决它。

这是我的渣

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

这是我到目前为止所尝试的。

主页.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>

这是我的打字稿文件代码

import { Component, ViewChild, AfterViewInit, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

    itemscount:Number = 0;
    btnText:string="Add an Item";
    goalText:string = "";
    goals = ['My First Goal'];
    editable:Boolean = true;
    edit_btn_txt:string = "Edit";
    constructor() { }

    ngOnInit() {

    }

    @ViewChild('goalInput') pizzaInput: ElementRef;

    additem(){
        this.goals.push(this.goalText);
        this.goalText='';
        this.itemscount = this.goals.length;
    }


    ngAfterViewInit() {
        //console.log(this.extraIngredient); // tomato

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

    removeitem(i){
        this.goals.splice(i,1);
        this.itemscount = this.goals.length;
    }
}

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

提前致谢。

Answer 1

这是使用 ViewChildren 的另一种解决方案：

@ViewChildren('goalInput') pizzaInput;

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