Question

我有以下代码：

<li *ngFor="let item of Array let i = index">
  <span>
    <label (dblclick)="editTag($event,i)">
      {{item.tag}}
    </label>
    <input type="text" #tagInput  />
  </span>
</li>

代码处于for循环中。当我单击标签时，所有标签都应隐藏，并且输入应可见。当前，当我单击每个标签时，另一个保持打开状态。单击任何项目时如何隐藏其他跨度？

我在.ts中有以下代码

@ViewChild('tagInput') tagNameTextInput: ElementRef;
  editTag(event: any,index: any) {
    //console.info(event);
    this.tagNameTextInput.nativeElement.hidden = true;
    this.tagNameTextInput.nativeElement.previousElementSibling.hidden = false;
    let initialValue = event.target.childNodes[0].nodeValue.trim();
    event.target.hidden = true;
    event.target.nextElementSibling.hidden = false;
    event.target.nextElementSibling.value = initialValue;
    console.log(index);
    // this.checkListNameHidden = true;
    // this.checkListNameTextInput.nativeElement.value = initialValue;
    // this.checkListNameTextInput.nativeElement.focus();


    event.stopPropagation();
  }

如何解决这个问题？

Answer 1

您有多个孩子，因此您需要使用@ViewChildren而不是@ViewChild。

此外，在您的ngFor循环中，您没有唯一的模板引用#tagInput。将QueryList与ElementRef一起使用。

尝试：@ViewChildren('tagInput') tagNameTextInput: QueryList<ElementRef>;

代替

@ViewChild('tagInput') tagNameTextInput: ElementRef;。

从@angular/core导入QueryList。

赞这个import { Component, QueryList } from '@angular/core';

Answer 2

最好的方法是在“项目”中添加新属性（例如称为“编辑”）

<li *ngFor="let item of Array let i = index">
  <span>
    <label *ngIf="!item.editing" (dblclick)="item.editing=true;">
      {{item.tag}}
    </label>
    <input *ngIf="item.editing" [(ngModel)]="item.tag" type="text" (blur)="item.editing=false"  />
  </span>
</li>

看几件事：

1.-单击标签，变量变为true，因此显示inpùt

2.-在项目模糊中，变量变为false，因此显示标签

3.-使用[[ngModel）]在输入和值之间建立关系

隐藏列表中的其他元素

2 个答案: