隱藏/顯示ngFor中的單個或特定按鈕

Question

我是新手。 我正在遍歷一系列對象。 我聲明了兩個按鈕，分別是開始和結束。 我想最初顯示每個項目的開始。 當用戶單擊某個項目的“開始”按鈕時，該項目的“開始”按鈕應隱藏，而“結束”按鈕應顯示。

  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-lr-0-5" (click)="startTask(item.id)">Start</button> <button class="btn btn-danger mar-lr-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

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