Angular - 僅在單擊的行上啟用按鈕

Question

我有一張表，上面有一些細節。 我的問題是在其中一欄中我有按鈕。 例如，我單擊了第 0 行的按鈕，但所有按鈕都已啟用。 有誰知道我該如何解決這個問題？

已經嘗試通過行號，但至今未成功:(

HTML

 <div *dxTemplate="let data of 'cellTemplate'">
      <button type="button" data-toggle="dropdown" class="btn ClassPlay">
        <img src="./assets/play.svg" *ngIf="currentState=='pause'">
        <img src="./assets/playV.svg" *ngIf="currentState=='start'">
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="currentState='start'; startTimer(data, data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
          (click)="currentState='pause'; pauseTimer((data, data.rowIndex)">Pause</a>
      </div>
      <span class="timer">{{display}}</span>
    </div>

組件.ts

startTimer(data,row) {
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display=this.transform( this.time)
    }, 1000);
  }

      transform(value: number): string {
      var sec_num = value; 
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    return hours+':'+minutes+':'+seconds;
    }

  pauseTimer(data,row) {
    clearInterval(this.interval);
  }

我試過的

<button type="button" data-toggle="dropdown" class="btn ClassPlay">
        <img src="./assets/play.svg" *ngIf="currentState=='pause'">
        <img src="./assets/playV.svg" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex">
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="currentState='start'; startTimer(data)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex" routerLinkActive="active"
          (click)="currentState='pause'; pauseTimer(data)">Pause</a>
      </div>
      <span class="timer">{{currentRowIndex === data.rowIndex ? display : ''}}</span>



startTimer(data) {
    this.currentRowIndex = data.rowIndex;
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display=this.transform( this.time)
    }, 1000);
  }

      transform(value: number): string {
      var sec_num = value; 
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    return hours+':'+minutes+':'+seconds;
    }

  pauseTimer(data) {
    this.currentRowIndex = data.rowIndex;
    clearInterval(this.interval);
  }

現在唯一的問題是，當我單擊開始按鈕時，其他行上的所有按鈕都會消失，只會重新出現在下一行。 時間也是錯誤的，我在一條線上開始時間線，而當我從另一條線開始時，時間總是不斷增加，而不是像它應該的那樣重新開始

Answer 1

根據您的代碼，我的假設是您總是在更改相同的變量currentState 。 一旦你第一次點擊開始按鈕（錨點），就像這里

(click)="currentState='start'; ....//

您正在將共享變量currentState設置為起始值。 因此所有的ngIf做出反應。 你我相信你想要實現的是有一個布爾值來表達表中每一行的當前狀態。

更新：這是我認為你想要實現的一個例子

 <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="startTimer(data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
          (click)="pauseTimer()">Pause</a>
      </div>

這應該是你的Component.ts

  public dataArray: Array<DataItem>;
  public timeArray: Array<number>;
  public interval;

  constructor() {
    this.dataArray = // constructor of your data

    // We create an array to keep track of the time for each element
    // and fill the array initially with zeroes
    this.timeArray = new Array(this.dataArray.length).fill(0);
  }

  // We need here to know the index in order to know what timer to increment in the array
  startTimer(rowIndex) {
    this.interval = setInterval(() => {
      this.timeArray[rowIndex]++;
      // The display will always show the current ongoing timer
      this.display=this.transform(this.timeArray[rowIndex])
    }, 1000); 
  }

  pauseTimer(rowIndex) {
    // alert(this.timeArray[rowIndex]) <-- just for test
    clearInterval(this.interval); // Clears the interval
  }

更新 2從您上次更新開始，我相信您還想顯示每一行的顯示。 這里如何實現它

<span class="timer">{{transform(timeArray[rowIndex])}}</span>

如您所見，我不使用 display 變量，而是將轉換函數應用於rowIndex的值

更新 3您發布的最后一個問題的解決方案如下

.. *ngIf="currentState=='start' && currentRowIndex === data.rowIndex" 

&& 僅對當前行返回 true，因此僅顯示該行。 像這樣刪除它

.. *ngIf="currentState=='start'" 

並在您按下暫停鍵時重置該行的計時器

pauseTimer(rowIndex) {
    this.timeArray[rowIndex] = 0; // Add this line
    clearInterval(this.interval); // Clears the interval
  }

Answer 2

如果我正確理解您的問題，我可以提供此解決方案。

<div *dxTemplate="let data of 'cellTemplate'">
      <button type="button" data-toggle="dropdown" class="btn ClassPlay">
        <img src="./assets/play.svg" *ngIf="currentState=='pause'">
        <img src="./assets/playV.svg" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex">
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="currentState='start'; startTimer(data, data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start' && currentRowIndex === data.rowIndex"routerLinkActive="active"
          (click)="currentState='pause'; pauseTimer()">Pause</a>
      </div>
      <span class="timer">{{currentRowIndex === data.rowIndex ? display : '00'}}</span>
    </div>

並在 .ts

currentRowIndex = null; // you need to define in your component

startTimer(index) {
    this.currentRowIndex = index;
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display=this.transform( this.time)
    }, 1000);
  }

      transform(value: number): string {
      var sec_num = value; 
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    return hours+':'+minutes+':'+seconds;
    }

  pauseTimer() {
    this.currentRowIndex = null;
    clearInterval(this.interval);
  }