NgFor и события щелчка
Я впервые перехожу с React на Angular и пытаюсь к нему привыкнуть. Как выполнить отдельное событие щелчка только для нужного элемента, а не для каждого элемента в моем списке JSON?
Служба Logout() работает. Если я этого не сделаю; используйте ngFor и передайте событие щелчка непосредственно в шаблон, который он делает то, что должен делать. Но не тогда, когда я передаю его из JSON в ngFor. Я полагаю, что всегда могу вернуться в другую сторону, но теперь мне любопытно. Забавно, я добавил alert() и событие срабатывает, а не AuthService в функции выхода...
Шаблон
<a
*ngFor = "let usermenuitem of usermenu; let i = index"
[routerLink] = "usermenuitem.link"
(click) = "usermenuitem.goto()">
{{usermenuitem.title}}
</a>
Компонент
export class AuthorisedTopNavComponent implements OnInit {
usermenu:Object[] = [
{
title: 'Account',
link: '/account',
icon:"ua-home.svg",
goto: ()=>{},
},
{
title: 'Membership',
link: '/membership',
icon:"ua-home.svg",
goto: ()=>{},
},
{
title: 'Logout',
link: '/',
icon:"ua-home.svg",
goto: this.logoff,
},
]
constructor (
public authService: AuthService
) {}
ngOnInit() {}
logoff() {
this.authService.logout('/');
}
}
Я подозреваю, что this не привязан к правильному контексту.
Попробуйте this.logoff.bind(this)
@OwenKelvin БУЯА!!!! Отлично сделано! если вам нужен кредит, получите ответ на этот вопрос. Спасибо
Странно использовать [routerLink] и (click) в одном и том же теге. Я думаю, что использование goto:()=>this.logoff() может сработать, но я не уверен
@Eliseo, это потому, что ngFor прикреплен к тегу <a>, который в некоторых случаях используется как событие щелчка, например выход из системы, и как ссылка на маршрутизатор в других случаях, которые служат только ссылкой на страницу.
@LOTUSMS, попробуйте тогда [routerLink] = "usermenuitem.link?usermenuitem.link:null" (click) = "!usermenuitem.link && usermenuitem.goto()" или используйте роутер. Перейдите в функцию "goto"
@Eliseo, я пытался проверить это, и это не сработало. Возможно, с некоторыми дополнительными настройками, но он работает так, как у меня сейчас.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете прикрепить событие клика к своему шаблону и передать объект меню пользователя
<a
*ngFor = "let usermenuitem of usermenu; let i = index"
[routerLink] = "usermenuitem.link"
(click) = "goto(usermenuitem)">
{{usermenuitem.title}}
</a>
Компонент
export class AuthorisedTopNavComponent implements OnInit {
usermenu:Object[] = [
{
title: 'Account',
link: '/account',
icon:"ua-home.svg",
goto: ()=>{},
},
{
title: 'Membership',
link: '/membership',
icon:"ua-home.svg",
goto: ()=>{},
},
{
title: 'Logout',
link: '/',
icon:"ua-home.svg",
goto: this.logoff,
},
]
constructor (
public authService: AuthService
) {}
ngOnInit() {}
logoff() {
this.authService.logout('/');
}
goto(usermenu){
if (usermenu.title === 'logout'){
this.logoff()
}
}
}
Надеюсь это поможет?
Спасибо, но я не думаю, что это хорошая практика. Это хороший хак, но он работает только в том случае, если в заголовке есть выход из системы. Если заголовок когда-либо менялся на выход из системы, выход из системы или что-то еще, то обработчик событий также должен быть изменен.
Анализ проблемы
Шаги и функции кода работают так, как вы объяснили.
Служба Logout() работает. Если я этого не сделаю; используйте ngFor...
Так что же происходит? Почему служба не вызывается?
Рассмотрим шаги...
- Вы звоните
*ngFor
<a (click) = "usermenuitem.goto()" ... >
<a (click) = "usermenuitem.goto()" ... >
<a (click) = "usermenuitem.goto()" ... >
...
- Теперь разбиваем
usermenuitem.goto(). Для предыдущего это просто() => {}, так что они будут работать как положено. Наше внимание сосредоточено наgoto: this.logoff,
Так что просто мы делаем что-то вроде ниже
const goto = this.logoff
goto()
class myObject {
constructor() {
this.name = 'Peter'
}
name = 'My Name';
static sayName () {
console.info('Say ' + this.name )
}
}
console.info("Message 1 => ")
myObject.sayName()
console.info("Message 2 => ")
const p = myObject.sayName
p()Если вы запустите приведенный выше код, вы увидите, что первый подход работает, а второй нет! Выдает ошибку, что this не определено.
Это проблема, с которой вы столкнулись. Ваш код теряет контекст this, поэтому не работает. Другие функции, такие как alert(), будут работать, но любая функция с this не будет работать.
Решение
Чтобы решить эту проблему, вам нужно только убедиться, что вы не потеряете контекст this.
Опция 1
Назначьте переменную для хранения this, например that = this. Я никогда не использовал эту опцию в angular, но хорошо работает в vanilla js.
Вариант 2
Просто привяжите this. Обычно это самый простой вариант. В вашей ситуации вы можете просто использовать this.logoff.bind(this), и ваш код должен работать
Вариант 3
Используйте функцию стрелки
Это самый простой вариант. Просто измените функцию logoff на
logoff = () => {
this.authService.logout('/');
}
Одним из gotcha этого подхода является то, что если вы используете TS версии 4+, вы можете столкнуться с проблемами, связанными с расположением свойств, в противном случае это работает.
вы пробовали ()=> this.logoff()?