Question

我打算使用三个按钮（下载，编辑和上传）。

单击“下载”按钮时，我执行一个功能，并且想要将“下载”按钮更改为“编辑”按钮。单击“编辑”按钮时，我执行一个功能，并且想要将“编辑”按钮更改为“上载”按钮。当我单击“上传”按钮时，我执行一个功能，并且想要将“上传”按钮更改为“下载”按钮。

我的问题是我无法仅在单击按钮的行上更改按钮。

我试图将索引传递给该函数，但无法正常工作。

我使用javascript隐藏/显示了按钮，具体取决于执行的功能（示例） $ (".class").Css ({"display": "none"});，但这不是最好的方法：（

有人可以帮我吗？

.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

您可以尝试以下操作：https://stackblitz.com/edit/angular-fj5rvr

基本上，我们添加一个具有按钮当前状态的属性，并在用户单击按钮时对其进行更改。

Answer 2

您可以使用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

如何仅在单击按钮的div中更改按钮

2 个答案: