动态更改按钮图标

Question

给出以下按钮，

  <button
      icon = 'ui-icon-check'
      type = 'text'
      pButton
      label = 'Age'
      iconPos = 'right'></button>

我想动态更改分配给按钮图标属性的图标：

我的尝试如下所示：

ng.html

  <button
      [icon] = 'btnIcon'
      type = 'text'
      pButton
      label = 'Age'
      iconPos = 'right'></button>

ng.组件

....
btnIcon: string = 'ui-icon-check'

组件初始化时图标已正确分配。

但是，当我这样做时

ng.组件

if(this.form.valid)
{this.btnIcon = 'ui-icon-information'}

虽然表单有效，但图标并没有按预期改变。

欢迎任何想法。谢谢

Answer 1

根据评论指出，尝试一下

 <button
      [attr.icon] = 'btnIcon'
      type = 'text'
      pButton
      label = 'Age'
      iconPos = 'right'></button>

Answer 2

你必须使用一个函数：

定义选择图标的函数：

ng.组件

selectIcon() {
  return this.form.valid ? 'ui-icon-check' : 'ui-icon-information';
}

调用属性中的函数

icon

ng.html

<button
      [icon] = 'selectIcon()'
      type = 'text'
      pButton
      label = 'Age'
      iconPos = 'right'></button>