隐藏列表中的其他元素 [英] Hide other elements in list

问题描述

我有以下代码:

<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循环中.当我单击标签时，所有标签都应隐藏，并且输入应可见.当前，当我单击每个标签时，另一个保持打开状态.单击任何项​​目时如何隐藏另一个跨度?

The code is in a for loop. When I click on a label, all labels should be hidden and the input should be visible. Currently, when I click on each label, the other remain open. How do I hide the other span when clicking on any item?

我在.ts中有以下代码

I have below code in .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.

You have multiple children, So you need to use @ViewChildren instead of @ViewChild.

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

Also in your ngFor loop you do not have unique template reference #tagInput. Use QueryList with ElementRef.

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

代替

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

从@angular/core导入QueryList.

Import QueryList from @angular/core.

喜欢此import { Component, QueryList } from '@angular/core';

这篇关于隐藏列表中的其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！