如何更改按钮上的图标？

Question

有一个按钮可以打开侧面菜单。我想根据是否打开的菜单将图标更改为按钮。也就是说，如果窗口处于活动状态，则按钮pi pi-lock上的图标否则为pi pi-lock-open。怎么做？

html：

...
<p-button (click)="_toggleOpened()" icon="pi pi-lock"></p-button>
...

ts：

  private _opened: boolean = true;
  private _toggleOpened(): void {
    this._opened = !this._opened;
  }

Answer 1

将icon属性设置为属性绑定，并将.pi pi-lock分配给.ts中的变量，

将您的条件作为您的要求

    <p-button (click)="_toggleOpened()" [icon]="pi pi-lock"></p-button>


    ts file:
    variable="pi pi-lock"

     private _opened: boolean = true;
      private _toggleOpened(): void {
        this._opened = !this._opened;
if(!this.opened)
{
this.variable="pi pi-lock-open";
}
else{
this.variable="pi pi-lock"
}
      }

Answer 2

尝试一下：

HTML：

<p-button (click)="_toggleOpened()" [icon]="icon_val"></p-button>

TS：

icon_val: string="pi pi-lock"
private _opened: boolean = false;

private _toggleOpened(): void {
    this._opened=!this.opened
    if (this._opened)
        this.icon_val="pi pi-lock-open"
    else
        this.icon_val="pi pi-lock"
    }