如何动态更改 clr-icon 自定义元素的形状？

Question

在 Clarity Icon docs 中，他们表明您可以使用 shape 属性来设置图标形状，如下所示：

<clr-icon shape="info-circle" size="16"></clr-icon>

在我的 angular 模板中，我使用了这样的 clr-icon 元素：

<clr-icon [shape]="myShape"></clr-icon>

并使用我的组件设置绑定到 myShape:

的形状的字符串值

export class MyComponent {
    public myShape = 'volume-up';

    changeShape() {
        if(this.myShape === 'volume-up') {
            this.myShape = 'volume-mute';
            return;
        }
        this.myShape = 'volume-up;
    }
}

使用按钮（模板中未显示）我想运行 changeShape() 动态更改图标的形状但没有任何反应，我错过了什么？

Answer 1

请参阅Angular 模板语法绑定目标部分。 Link: https://angular.io/guide/template-syntax#binding-targets

您需要使用：

[attr.shape]="myShape"

演示：https://plnkr.co/edit/m4v5hXMxWRL5ObD3TPaO?p=preview

如何动态更改 clr-icon 自定义元素的形状？

How can I dynamically change the shape of a clr-icon custom element?

custom-element

angular

vmware-clarity