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

Posted 2021-04-07

我是角色的新手，只是日复一日地学习它。我正在制作一个角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>

这是我的打字稿文件代码

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

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

提前致谢。

答案

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

@ViewChildren('goalInput') pizzaInput;

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

另一答案

试试这个

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

并在您的component.ts添加此

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


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