angular - 如何动态更改 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

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

你需要使用：

[attr.shape]="myShape"

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