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

Question

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

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

在我的角度模板中，我使用的是像这样的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

请参阅角度模板语法绑定目标部分。链接：https://angular.io/guide/template-syntax#binding-targets

您需要使用：

[attr.shape]="myShape"

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