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>

Component.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);
  }

我尝试了什么

  <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' && currentRowIndex === data.rowIndex" routerLinkActive="active"
          (click)="pauseTimer()">Pause</a>
 </div>

startTimer(rowIndex) {
    this.currentRowIndex = rowIndex;
    this.interval = setInterval(() => {
    this.time[rowIndex]++;
      this.display=this.transform(this.time[rowIndex])
    }, 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(rowIndex) {
    this.currentRowIndex = null;
    clearInterval(this.interval); // Clears the interval
  }

Answer 1

根据您的代码，我的假设是您总是在更改相同的变量currentState。第一次单击“开始”按钮（锚点）后，如此处

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

您正在将shared变量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
  }

Answer 2

如果我正确理解您的问题，我可以提供此解决方案。

 <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' && currentRowIndex === data.rowIndex" routerLinkActive="active"
          (click)="pauseTimer()">Pause</a>
 </div>

和.ts中的>

public dataArray: Array<DataItem>;
  public timeArray: Array<number>;
  public interval;
 currentRowIndex = null;
  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.currentRowIndex = 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
    this.currentRowIndex = null;
    clearInterval(this.interval); // Clears the interval
  }