Скрыть / показать индивидуальную или определенную кнопку внутри ngFor - PullRequest
Новая
       35

Скрыть / показать индивидуальную или определенную кнопку внутри ngFor

0 голосов
/ 04 марта 2019

Я новичок в угловой.Я перебираю массив объектов.Я объявил две кнопки, которые являются Start & End.Я хочу отобразить начало изначально для каждого элемента.когда пользователь нажимает кнопку «Пуск» элемента, кнопка «Пуск» этого элемента должна скрываться и должна отображаться кнопка «Конец». 

 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>

В приведенном выше примере каждый элемент имеет уникальный идентификатор.для каждого элемента есть одна кнопка начала и окончания.Я хочу, чтобы кнопка «Пуск» изначально отображалась для всех, и когда я нажимаю кнопку «Пуск» элемента, эта кнопка должна заменяться кнопкой «Конец».все остальные должны остаться прежними.

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

1 Ответ

0 голосов
/ 04 марта 2019

сначала вам понадобится дополнительное свойство, например кнопка этого массива

.ts file 

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