Как я могу динамически изменять форму настраиваемого элемента clr-icon?

В документах по значку четкости показано, что вы можете использовать атрибут формы. чтобы установить форму значков следующим образом:

<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() для динамического изменения формы значка, но ничего не происходит, что мне не хватает?


person hippeelee    schedule 24.10.2017    source источник


Ответы (1)


См. Раздел «Цели привязки синтаксиса шаблона Angular». Ссылка: https://angular.io/guide/template-syntax#binding-targets

введите описание изображения здесь

Вам необходимо использовать:

[attr.shape]="myShape"

Демо: https://plnkr.co/edit/m4v5hXMxWRL5ObD3TPaO?p=preview

person takeradi    schedule 24.10.2017