Скрыть другие элементы в списке - PullRequest
Новая
       16

Скрыть другие элементы в списке

0 голосов
/ 05 ноября 2018

У меня есть следующий код: 

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

Как это решить?

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

У вас несколько детей, поэтому вам нужно использовать @ViewChildren вместо @ViewChild.

Также в вашем цикле ngFor нет уникальной ссылки на шаблон #tagInput. Используйте QueryList с ElementRef.

Попробуйте: @ViewChildren('tagInput') tagNameTextInput: QueryList<ElementRef>;

вместо

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

Импорт QueryList из @angular/core.

Как это import { Component, QueryList } from '@angular/core';

0 голосов
/ 05 ноября 2018

лучший подход - добавить новое свойство в «item» (например, называемое «edit»), так что 

<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. - при размытии элемента переменная становится ложной, поэтому отображается метка

3. - Используйте [(ngModel)] для связи между входом и значением

...