Как мне изменить кнопку только в div, где она была нажата

Question

Я намерен использовать три кнопки («Загрузить», «Редактировать» и «Загрузить»).

Когда я нажимаю кнопку «Загрузить», я выполняю функцию и хочу изменить кнопку «Загрузить» на кнопку «Редактировать». Когда я нажимаю кнопку «Редактировать», я выполняю функцию и хочу изменить кнопку «Редактировать» на кнопку «Загрузить». Когда я нажимаю кнопку «Загрузить», я выполняю функцию и хочу изменить кнопку «Загрузить» на кнопку «Загрузить».

Моя проблема заключается в том, что я не могу изменить кнопку только в той строке, где она была нажата.

Я пытался передать индекс функции, но он не работал правильно.

Я использовал javascript, чтобы скрыть / отобразить кнопки в зависимости от выполняемых функций. (пример) $ (".class").Css ({"display": "none"}); но это не самый лучший способ: (

Может кто-нибудь мне помочь?

DEMO

. html

<div *ngFor="let item of items; let i = index">
    <div class="d-flex flex-row" style="margin-top:16px">
        <div class="p-2">{{item.id}}</div>
        <div class="p-2">{{item.name}}</div>
        <div class="p-2 bg-primary" style="margin-left:auto">
            <button (click)="download()">Download</button>
            <!-- <button (click)="edit()">Edit</button>
    <button (click)="upload()">Upload</button> -->
        </div>
    </div>
</div>

.ts

items=[{
  id:1,
  name:"item1",
},
{
  id:2,
  name:"item2",
},
{
  id:3,
  name:"item3",
},]

download(){
  //change button download to button EDIT
}

edit(){
  //change button edit to button Upload
}

upload(){
  //change button upload to button Download
}

Нажав на кнопку загрузки, я намерен выполнить функцию загрузки () и изменить кнопку загрузки для редактирования, просто в строке, где она была нажата.

Answer 1

Вы можете использовать ViewChild переменную и Renderer2 для установки innerHTML для кнопки

this.renderer.setProperty(this.downloadButton.nativeElement, "innerHTML",  "Edit");

HTML

<div *ngFor="let item of items; let i = index">
    <div class="d-flex flex-row" style="margin-top:16px">
        <div class="p-2">{{item.id}}</div>
        <div class="p-2">{{item.name}}</div>
        <div class="p-2 bg-primary" style="margin-left:auto">
            <button (click)="download()" #downloadButton>Download</button>
            <!-- <button (click)="edit()">Edit</button>
    <button (click)="upload()">Upload</button> -->
        </div>
    </div>
</div>

TS:

 constructor(private renderer: Renderer2) {}
  @ViewChild("downloadButton") downloadButton: ElementRef;

  download() {
    //change button download to button EDIT
    this.renderer.setProperty(
      this.downloadButton.nativeElement,
      "innerHTML",
      "Edit"
    );
    //this.downloadButton.nativeElement.innerText = 'Edit';
  }

Демо https://stackblitz.com/edit/angular-91rnzc

Answer 2

Вы можете попробовать следующее: https://stackblitz.com/edit/angular-fj5rvr

В основном мы добавляем свойство, которое имеет текущее состояние кнопки, и меняем его всякий раз, когда пользователь нажимает кнопку.