显示特定点击项目的按钮

Question

在我的组件中，我有一个输入字段 i,e text area。单击特定的 text area/ text box 我会显示这样的按钮：

此功能运行良好

当我单击特定区域时，我只想为该单击的文本区域显示按钮（即保存）。
但是在单击 文本区域 时，所有文本区域都会显示按钮（保存），如上图所示。

代码：

模板：

 <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

您在创建组件时采用了错误的方法，您只是遍历数组并创建多个 html 标记，您需要创建一个 "mytextareawithbuttons" 组件，然后在循环中创建您的组件的实例，这样每个组件都会处理自己的状态。

样本：

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

Answer 2

如果您想保持代码结构不变，一种可能的方法是在 *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 Example

您也可以使用 loop 而不是模板变量元素，但这会修改您的绑定值（您的 feeds 数组中的元素将具有额外参数 showChecklistAction），因此请选择最适合的方法。

请注意，当您取消对元素的关注时，按钮仍然可见，但我想这很好，因为您为此添加了 X 按钮。

Answer 3

由于您正在循环迭代，因此设置 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 link.

谢谢。

显示特定点击项目的按钮

To display button for the particular clicked item

typescript

angular

angular6

模板：