Question

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

此功能运行正常

当我单击特定区域时，我只想为该单击的文本区域显示按钮（即保存）。。
但是，如上图所示，单击文本区域后，所有文本区域均显示按钮（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 Example

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

请注意，当您使元素失去焦点时，按钮保持可见，但是我想这很好，因为您为此添加了X按钮。

Answer 2

您采用了错误的方式来创建组件，只是在数组上循环并创建了多个html标记，您需要创建一个“ mytextareawithbuttons”组件，然后在循环中以这种方式创建组件的实例每个组件都会处理自己的状态。

示例：

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

Answer 3

由于要遍历循环，因此设置 showChecklistAction = true 将显示所有数组项的按钮控件。您需要跟踪每个单独的数组项以显示/隐藏按钮控件。

一种方法可能是修改您的提要数组，并添加一个 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链接。

谢谢。

显示特定点击项目的按钮

3 个答案:

模板：