как сохранить состояние кнопки для каждого элемента ngFor

Question

Я интеграция Trello в мой угловой проект.есть кнопка таймера запуска для каждой и каждой карты.предположим, что когда пользователь нажимает на кнопку таймера запуска карты A, эта кнопка заменяется кнопкой завершения задачи.проблема здесь, кнопка конца появляется во всех картах.Если я нажму на кнопку таймера кнопки запуска карты А., эта кнопка должна заменяться только на карте А. Она не должна меняться на всех картах

на изображении выше в разделе1 У меня есть кнопка таймера запуска, когда я нажимаю на кнопку, она заменяется кнопкой окончания таймера, как показано в разделе 2, но когда я синхронизирую модальное окно и нажимаю на другую карту, она также отображает кнопку окончания таймера на другой карте.ожидается, что если я нажму на кнопку карты A, она должна заменить только карту A на карту B, на ней должна отображаться кнопка таймера запуска.

Заранее спасибо.

Ниже приведен мой код -

startTimer() {
    this.startFlag = !this.startFlag;
}

activityModal(id, name, due) {
    jQuery("#activityModal").modal('show');

    this.cardDueDate = due;
    this.mainCardName = name;
    this.mainCardId = id;
}

// card iterates
<div class="row justify-content-center no-gutters overflow">
  <section class="list" *ngFor="let item of mainListArr" id="{{item.id}}">
    <header>{{item.name}}</header>
    <article class="card" *ngFor="let card of item.cards">
      <a (click)="activityModal(card.id, card.name,card.due)">
        <header>{{card.name}}</header>
        <div class="detail badge is-due-complete" *ngIf="card.due != null">
          <i class="badge-icon fa fa-clock-o" aria-hidden="true"></i>&nbsp;
          <span class="badge-text">{{card.due | date : 'MMM dd'}}</span>
        </div>
      </a>
    </article>
  </section>
</div>


// modal popup code

<!-- Modal for activity -->
<div class="modal fade" id="activityModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="activityModal"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" *ngIf="mainCardName !== ''">{{mainCardName}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="closeActivityModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-9">
          some code here
           </div>
          <div class="col-md-3 text-center vertical-center">
            <small><u>Card Actions</u></small>

            <button class="btn btn-action mar-t-05" (click)="startTimer()" *ngIf="startFlag">Start Timer</button>
            <button class="btn btn-action mar-t-05" (click)="endTimer()" *ngIf="!startFlag">End Timer</button>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Это потому, что кнопки на каждой карточке имеют одну и ту же переменную для отображения или скрытия таймера начала и окончания.

Самый простой способ - отправить значение индекса для карточек в функциях startTimer и endTimer ииспользуйте этот индекс, чтобы иметь уникальное значение флага для каждой карты.