javascript - 隐藏列表中的其他元素

我有以下代码：

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

如何解决呢？

最佳答案

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

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

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

代替

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

从@angular/core导入QueryList。

像这样import { Component, QueryList } from '@angular/core';