隐藏列表中的其他元素

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

最好的方法是将新的属性添加到 "item"，（例如称为 "editing"）所以

<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.-点击标签，变量变为真，因此显示输入

2.-在item blur中，变量变为false，所以显示标签

3.-使用[(ngModel)] 来确定输入和值之间的关系

Answer 2

您有多个children，所以您需要使用@ViewChildren而不是@ViewChild。

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

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

而不是

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

从 @angular/core 导入查询列表。

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

隐藏列表中的其他元素

Hide other elements in list

javascript

angular

angular6

viewchild