angular - 如何更改按钮上的图标？

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;
  }

标签： angularprimeng

Answer 1

将图标属性作为属性绑定并将您的“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"
}
      }