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

Question

在Clarity Icon文档中,他们表明您可以使用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