при отключении кнопки в таблице в angular кнопка следующего ряда изменяется по мере изменения длины массива

Question

У меня проблема с отключением кнопки в таблице матов в angular. В каждой строке есть кнопка для отмены задания Дженкинса. У меня есть два списка: один из ожидающих сборок, в котором я могу нажать кнопку, чтобы отменить задание, и один из сборок, в котором отмененные задания появляются при отмене. Проблема заключается в том, что при использовании этого кода, когда я нажимаю кнопку второй в списке, третий переходит, чтобы получить это значение индекса в массиве, и получает отключенное значение true, так как другой исчезает из массива.

1- кнопка включена 2-кнопка включена 3-кнопка включена

Я нажимаю кнопку 2

Новый сценарий:

1-кнопка включена 2- кнопка отключена 3- кнопка включена

через несколько секунд, когда строка 2 исчезнет из этого списка, номер 3 получает индекс 2 и отключает кнопку, даже если она не нажата

1- кнопка включена 2- кнопка отключена исчезает 3- кнопка отключена, даже когда не нажата

Мой код:

html:

 <ng-container matColumnDef="buildId">
        <th mat-header-cell *matHeaderCellDef> Cancel </th>
        <td mat-cell *matCellDef="let element; let i=index">
          <button mat-flat-button color="accent" [disabled]="clicked[i]"
            (click)="cancelBuildingImage(element.buildId); clicked[i] = true">
            Cancel Build
          </button>
        </td>
</ng-container>

мой. ts

constructor(private builderService: BuilderService, private snackMessageService: SnackMessageService) {
    this.buildingImageList = new Array();
    this.callLoop = setInterval(() => { this.populateBuildingImageList() }, 15000);
    this.clicked = []
  }

ngOnInit() {
    this.populateBuildingImageList();
    this.buildingImageList.forEach(el => {
      this.clicked.push(false);
    });
  }

Есть идеи, как это исправить?