Для отображения кнопки для конкретного элемента, на который нажали

Question

В моем компоненте у меня есть одно поле ввода i,e text area.При нажатии на конкретный text area/ text box я показываю такую ​​кнопку:

Эта функция работает нормально

• когда я нажимаю на определенную область, я хочу кнопку показа (i, e SAVE) только для этой текстовой области, на которую нажали .

• Но при нажатии область текста кнопка (СОХРАНИТЬ) отображается для всех областей текста, как на рисунке выше.

КОД:

Шаблон:

 <div *ngFor="let loop of feeds">
    <label >
    <textarea                                
    (focus)="showChecklistAction = true" ></textarea>    

    <div *ngIf="showChecklistAction === true">
   <button style="margin:5px" (click)="updateSubtask(subtask)">Save</button>
  <button type="button" class="site_btn no_bg_btn btn comment_btn bold" (click)="showChecklistAction = false; ">X</button>
</div></label>
   </div>

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

   feeds = [
    {
        name:'input1',
    },
    {
         name:'input2',
    }


  ]
}

DEMO

Answer 1

Возможный подход, если вы хотите сохранить структуру своего кода, - это использовать переменную шаблона для элемента *ngFor:

Шаблон:

<div *ngFor="let loop of feeds" #input>
<label>
  <textarea (focus)="input.showChecklistAction = true" ></textarea>    

  <div *ngIf="input.showChecklistAction === true">
    <button style="margin:5px" (click)="updateSubtask(subtask)">Save</button>
    <button type="button" class="site_btn no_bg_btn btn comment_btn bold" (click)="input.showChecklistAction = false; ">X</button>
  </div>

</label>
</div>

Пример Stackblitz

Вы также можете использовать loop вместо элемента переменной шаблона, но это изменит ваше связанное значение (элемент в вашем массиве каналов будет иметь дополнительный параметр showChecklistAction), поэтомувыберите подход, который больше всего подходит.

Обратите внимание, что кнопки остаются видимыми, когда вы не фокусируете элемент, но я думаю, это нормально, поскольку вы добавили для этого кнопку X.

Answer 2

Поскольку вы выполняете итерации по циклу, установка showChecklistAction = true должна отображать элементы управления кнопки для всех элементов массива.Вам нужно отслеживать каждый отдельный элемент массива для отображения / скрытия элементов управления кнопки.

Один из подходов может состоять в том, чтобы изменить массив feeds и добавить поле isFocused ,как это ..

       feeds = [
    {
        name:'input1',
        isFocused:false
    },
    {
         name:'input2',
         isFocused:false
    }
]

html-код вашего компонента изменится следующим образом

   
   <div *ngFor="let loop of feeds">
    <label >
    <textarea                                
    (focus)="loop.isFocused = true" ></textarea>    
    
    <div *ngIf="loop.isFocused === true">
   <button style="margin:5px" (click)="updateSubtask(subtask)">Save</button>
  <button type="button" class="site_btn no_bg_btn btn comment_btn bold" (click)="loop.isFocused = false; ">X</button>
</div></label>
   </div>
   

Вот рабочая StackBlitz ссылка.

Спасибо.

Answer 3

Вы используете неправильный подход к созданию компонента, вы просто зацикливаетесь на массиве и создаете несколько разметок html, вам нужно создать компонент "mytextareawithbuttons", а затем в цикле создать экземпляры ваших компонентов, таким образом каждый компонент будет обрабатывать свое собственное состояние.

Пример:

https://stackblitz.com/edit/angular-okuqnp