在 ngFor 中隐藏/显示单个或特定按钮

Posted 2023-02-22

【中文标题】在 ngFor 中隐藏/显示单个或特定按钮

【英文标题】：Hide/show individual or specific button inside ngFor

【发布时间】：2019-07-25 13:10:25

【问题描述】：

我是 Angular 的新手。我正在遍历一组对象。我已经声明了两个按钮，即开始和结束。我想最初显示每个项目的开始。当用户单击项目的开始按钮时，该项目的开始按钮应隐藏并显示结束按钮。

 startTask(id) 
    console.log('item id',id)
  

  EndTask(index) 
    console.log('item id',id)
  

<div class="row no-gutters">
  <div class="card width hr" *ngFor="let item of allUserTaskArr">
    <div class="card-header">
      item.due | date
    </div>
    <div class="card-body pad-125">
      <div class="row no-gutters">
        <div class="col-md-12">
          item.name
          <div class="float-right">
            <button class="btn btn-info mar-l-r-0-5" (click)="startTask(item.id)">Start</button>
            <button class="btn btn-danger mar-l-r-0-5" (click)="EndTask(item.id)">End</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在上面的示例中，每个项目都有一个唯一的 ID。每个项目都有一个开始和结束按钮。我想最初为所有人显示开始按钮，当我单击项目的开始按钮时，只有该按钮应该替换为结束按钮。其他的都应该保持不变。

[![ngFor items image]]: https://i.stack.imgur.com/9pvLE.png

【问题讨论】：

您是否在任何变量中跟踪 ON/OFF？

我使用了一个标志变量并在按钮单击时切换该变量。但它会改变所有按钮的状态。

这里是stackbitz url请查看stackblitz.com/edit/angular-yvj3cd

谢谢，但是当我刷新页面时，按钮的状态会更改为默认值。我从服务器获取对象，响应中没有开始和结束标志。

你可以在得到服务器响应后在客户端设置开始和结束标志

【参考方案1】：

首先你需要额外的属性，比如那个数组的按钮

.ts 文件

allUserTaskArr = [
    
      'name': 'abc',
      'id':1,
      'button': 'start',
    ,
     
      'name': 'xyz',
      'id':1,
      'button': 'end',
    
  ];
 public startTask (item) 
   item.button =  'end';
 

 public endTask (item) 
   item.button =  'start';
 

和.html文件是

<div class="card width hr" *ngFor="let item of allUserTaskArr">
    <div class="card-header">
      item.due | date
    </div>
    <div class="card-body pad-125">
      <div class="row no-gutters">
        <div class="col-md-12">
          item.name
          <div class="float-right">
            <button class="btn btn-info mar-l-r-0-5" *ngIf="item.button =='start'" (click)="startTask(item)">Start</button>
            <button  (click)="endTask(item)" class="btn btn-danger mar-l-r-0-5" *ngIf="item.button =='end'">End</button>
          </div>
        </div>
      </div>
    </div>
  </div>

另一种方式 按索引更改按钮 .html 文件

 <div class="card width hr" *ngFor="let item of allUserTaskArr; let i = index">
    <div class="card-header">
      item.due | date
    </div>
    <div class="card-body pad-125">
      <div class="row no-gutters">
        <div class="col-md-12">
          item.name
          <div class="float-right">
            <button class="btn btn-info mar-l-r-0-5" *ngIf="item.button =='start'" (click)="startTask(item, i)">Start</button>
            <button  (click)="endTask(item, i)" class="btn btn-danger mar-l-r-0-5" *ngIf="item.button =='end'">End</button>
          </div>
        </div>
      </div>
    </div>
  </div>

.ts 文件

 allUserTaskArr = [
    
      'name': 'abc',
      'id':1,
      'button': 'start',
    ,
     
      'name': 'xyz',
      'id':1,
      'button': 'end',
    
  ];
 public startTask (item, index) 
   this.allUserTaskArr[index].button = 'end';
 

 public endTask (item, index) 
   this.allUserTaskArr[index].button =  'start';