Метод не имеет контекста при передаче в HTML компонента

Question

В моем компоненте я получил объект, который содержит ссылку на функцию.Но когда я передаю его в HTML компонента и выполняю, он не имеет доступа ни к каким другим свойствам за пределами области действия функции.Есть ли способ заставить это работать?

Вот мой код:

button =  {label: 'My action', action: this.doStuff }
doStuff(){
if(this.userService.IsUserLoggedIn){ // Cannot read property 'IsUserLoggedIn' of undefined
//do stuff
}
}

<button (click)="button.action()">{{button.label}}</button>

Я попытался добавить дополнительную функцию, которая связывает this, но у меня ничего не получилось.

<button (click)="exec(button.action)">{{button.label}}</button>

exec(func: Function){
func.bind(this);
func();
}

извините за любые ошибки

Answer 1

Это потому, что вы должны связать контекст при объявлении объекта кнопки:

button = { label: 'My action', action: this.doStuff.bind(this) }

Stackblitz

(я создал obj.condition, чтобы вы могли видеть похожую ошибку при удалении .bind(this))