* ngIf с функцией onClick

Question

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

<button class="btn btn-success btn-block" *ngIf="currentRole === 'ROLE_MODERATOR'?(click)=function_one():(click)=function_two()"

Но это не работает. Ошибка:

Error: Template parse errors:
Parser Error: Conditional expression

это: *ngIf="currentRole === 'ROLE_MODERATOR'

работает нормально, но я не могу использовать (щелкнуть) внутри "". Когда я использовал только function_one (): function_two (), он работал, но я хочу получить эту функцию onClick

Answer 1

Вам необходимо изменить следующий код и удалить *ngIf условие

<button class="btn btn-success (click)="function_click()" />
function_click(){

if(this.currentRole === 'ROLE_MODERATOR') {

this.function_one();
}else{
this.function_two();
}

Answer 2

Я думаю, у вас проблема с дизайном

Попробуйте вместо этого:

HTML:

<button class="btn btn-success btn-block" (click)="onClick()"></button>

Компонент:

onClick(){
 currentRole === 'ROLE_MODERATOR' ? function1() : function2();
}

Answer 3

На самом деле есть один способ сделать это. Вы должны выполнить if-else logi c внутри (щелкните).

Вот пример:

(click)="currentRole === 'ROLE_MODERATOR' ? function_one() : function_two()"

Если условие истинно, он вызовет function_one (), иначе function_two (). Надеюсь, это вам поможет.

Answer 4

Директива

*ngIf предназначена только для принятия true или false независимо от того, добавлять ли элемент в DOM или нет. Если вы хотите активировать разные методы (/ функции) в зависимости от условия - используйте его следующим образом:

<button
   class="btn btn-success btn-block"
   (click)="currentRole === 'ROLE_MODERATOR'? function_one() : function_two()"

Answer 5

Так нельзя. Есть несколько альтернатив, например

<button class="btn btn-success btn-block" *ngIf="currentRole === 'ROLE_MODERATOR'" (click)="function_one()">...</button>
<button class="btn btn-success btn-block" *ngIf="currentRole !== 'ROLE_MODERATOR'" (click)="function_two()">...</button>