How to change attribute when object changed?

Ionic Framework ionic-v3
1

I have the list of elements which looks like this

<ion-list *ngSwitchCase="'activities'">
    <ion-item-sliding *ngFor="let activity of activities; let i = index;" (ionDrag)="itemDragged($event, i)" (click)="showModalInfo(activity)">
        <ion-item>
            <ion-icon [name]="activities[i].direction_icon" style="float:right"></ion-icon>
            <h2>{{ activity['Event type'] }}</h2>
        </ion-item>
        <ion-item-options side="right">
            <button ion-button color="light" icon-left (click)="$event.stopPropagation(); showModalInfo(activity)">
                <ion-icon name="ios-more"></ion-icon>
                More
            </button>
            <button ion-button color="primary" icon-left>
                <ion-icon name="text"></ion-icon>
                Note
            </button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>

And the function bidden to the event:

itemDragged(event, index) {
    let percent = event.getSlidingPercent()

    let direction_icon = null

    if (percent > 0.5) {
        direction_icon = 'arrow-dropright'
    } else {
        direction_icon = 'arrow-dropleft'
    }

    this.activities[index].direction_icon = direction_icon

    console.log(this.activities[index].direction_icon)

    console.log(percent, direction_icon)
}

The problem is that <ion-icon [name]="activities[i].direction_icon" style="float:right"></ion-icon> not changes or changes only once some times…

P.S.

console.log print everything right but no visual changes.