отключена кнопка при клике с передачей идентификатора в angular

Question

Я пытаюсь отключить кнопку при нажатии, передавая идентификатор, я не хочу делать это с помощью let i = index, так как при отмене сборки следующая кнопка получает индекс исчезнувшей строки и отключает его, даже когда не нажата.

Я пытаюсь сделать это в моем. html:

 <ng-container matColumnDef="buildId">
        <th mat-header-cell *matHeaderCellDef> Cancel </th>
        <td mat-cell *matCellDef="let element">

          <button mat-flat-button color="accent" [disabled]="clicked[element.buildId]"
            (click)="cancelBuildingImage(element.buildId)">
            Cancel Build
          </button>
        </td>
</ng-container>

my .ts:

export class BuildingImagesComponent implements OnInit, OnDestroy {
  buildingImageList: BuildingImage[];
  displayedColumns: string[] = ["tag", "created", "startedBuilding", "finishDate", "buildId"];
  buildingImageErrorMessage: string;
  callLoop: any;
  clicked: any[];

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

 public cancelBuildingImage(buildId: string): void {
    this.builderService.cancelBuildingImage(buildId).then(() => {
      this.snackMessageService.sendMessage("Build canceled.");

      this.populateBuildingImageList();
      this.buildingImageList.forEach(el => {
        this.clicked.push(buildId);
      });
    }).catch(() => {
      this.buildingImageErrorMessage = "Oops, there was an error canceling the image build."
    });
  }

Это не отключить кнопку при нажатии. Почему это так?

Консоль браузера отображает это предупреждение (не об ошибке) ->

* Похоже, вы используете атрибут disabled с директивой реагирующей формы. Если вы установили для параметра true значение true, когда вы устанавливаете этот элемент управления в своем классе компонентов, атрибут disabled будет фактически установлен в DOM для вас. Мы рекомендуем использовать этот подход, чтобы избежать ошибок «изменено после проверки».

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });*

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

Answer 1

попробуйте это inyour html изменить кнопку

<td mat-cell *matCellDef="let element;let i=index" #someContainer>
     <button mat-flat-button color="accent" 
                (click)="cancelBuildingImage(element.buildId,i)">
                Cancel Build
              </button>
</td>

и в ваших .ts сделать это:

  @ViewChildren('someContainer') someDivs:ElementRef;

     public cancelBuildingImage(buildId: string,index: number,$event): void { //here modified
  someDivs.toArray()[index].nativeElement.classList.add('disable');

     this.builderService.cancelBuildingImage(buildId).then(() => {
          this.snackMessageService.sendMessage("Build canceled.");

          this.populateBuildingImageList();

          this.buildingImageList.forEach(el => {
            this.clicked.push(buildId);
          });
        }).catch(() => {
          this.buildingImageErrorMessage = "Oops, there was an error canceling the image build."
        });
      }

Я думаю, что должно работать, попробуйте это.