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

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

startTaskid{ console.log'item id'，id } EndTaskindex{ console.log'item id'，id } {{item.due | date} {{item.name} 开始 终止

---

首先，您需要额外的属性，如该数组的按钮

.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';
 }

 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';
 }

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>

---

您是否在任何变量中跟踪开/关？我使用了一个标志变量&单击按钮切换该变量。但它会改变所有按钮的状态。这是stackbitz url，请检查谢谢，但当我刷新页面时，按钮的状态会更改为默认状态。我从服务器获取对象响应中没有开始和结束标志。从服务器获取响应后，可以在客户端设置开始和结束标志

 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';
 }