когда я нажимаю кнопку в списке кнопок, она заменяет все из них вместо одной - Angular

Question

У меня проблема с изменением текста внутри кнопки при нажатии

У меня есть список кнопок в моем HTML, отображающий список angular материала:

<table *ngIf="buildingImageList.length 0" mat-table [dataSource]="buildingImageList" class="mat-elevation-z8">
  <ng-container matColumnDef="finishDate">
    <th mat-header-cell *matHeaderCellDef> Estimated Finish </th>
    <td mat-cell *matCellDef="let element"> {{ element.finishDate | date: 'medium'}} </td>
  </ng-container>

  <ng-container matColumnDef="buildId">
    <th mat-header-cell *matHeaderCellDef> Cancel </th>
    <td mat-cell *matCellDef="let element">
      <button mat-flat-button color="accent
 (click)="cancelBuildingImage(element.buildId); setCancelingText($event)">
            {{content}}
      </button>
    </td>
  </ng-container>
</table>

My .ts

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

  content: string;

  constructor(private builderService: BuilderService, private snackMessageService: SnackMessageService) {
    this.content = "Cancel build"
  }
  setCancelingText($event) {
    this.content = "Canceling..."
  }

  private populateBuildingImageList(): void {
    this.builderService.getBuildingImageList().then(response => {
      this.buildingImageErrorMessage = null;
      this.buildingImageList = response;
      this.convertDurationToDate();
    }).catch(() => {
      this.buildingImageErrorMessage = "Oops, there was an error getting the company list.";
    });
  }

public cancelBuildingImage(buildId: string): void {
    console.log("button pressed")
    this.builderService.cancelBuildingImage(buildId).then(() => {
      this.snackMessageService.sendMessage("Build canceled.");
      this.populateBuildingImageList(); // No se si es necesario, porque ya se llama en el builder.service
    }).catch(() => {
      this.buildingImageErrorMessage = "Oops, there was an error canceling the image build."
    });
  }

Нажатие одной кнопки изменяет текст всех настроек моей кнопки, и значение отменяется.

Как изменить текст только одной кнопкой при нажатии? dataSource - это объект, ключи которого отображаются в виде столбцов (пример: finishDate), и он не позволяет мне взаимодействовать с текстовой кнопкой.

Answer 1

В функции setCancelingText, this относится не к кнопке или событию, а к классу компонента, в котором вы в данный момент работаете. Из-за этого вы меняете текст content - переменная для всех кнопок.

Мой подход к исправлению будет работать следующим образом:

В модели BuildingImage добавьте свойство для текста кнопки отмены: *
cancelButtonText?: string;

Измените функцию populateBuildingImageList, чтобы определить пустые свойства, когда они появятся в вашем компоненте:

  private populateBuildingImageList(): void {
    this.builderService.getBuildingImageList().then(response => {
      this.buildingImageErrorMessage = null;

      for (let item of response) {
        item.cancelButtonText = "Cancel build";
      }

      this.buildingImageList = response;
      this.convertDurationToDate();
    }).catch(() => {
      this.buildingImageErrorMessage = "Oops, there was an error getting the company list.";
    });
  }

Затем измените кнопку следующим образом:

<button mat-flat-button color="accent"
        (click)="cancelBuildingImage(element.buildId); setCancelingText(element);">
  {{element.cancelButtonText}}
</button>

Наконец, измените setCancelingText -функция к этому:

setCancelingText(element) {
  element.cancelButtonText = "Canceling...";
}

Лично я бы также включил изменение кнопки отмены в функцию cancelBuildingImage, но вы не поделились тем, что она делает, и была ли setCancelingText Функция вызывается откуда-то еще, поэтому я оставил ее на месте.

*) Здесь я предполагаю, что BuildingImage - это класс. Если это интерфейс, вам нужно будет добавить текст при создании объекта.

Answer 2

{{content}} должно быть что-то вроде {{element.content}}. Функции события клика также должны соответственно измениться