Как динамически изменить назначенный eventHandler для указанного элемента ввода c?

Question

У меня есть дочерний компонент, который динамически генерирует пару полей ввода в родительском компоненте.

<app-xxx *ngFor="let el of fieldsElements" 
         [ngModel]="fieldsElements[el.name]"
         ...
         ...
         (keydown)="myFunction(yyy, zzz)">
</app-xxx>

Проблема заключается в том, что я хотел бы позвонить myFunction(), используя click() eventHandler , если вход имеет c имя, но в остальном я хочу оставить (keydown). Или, скажем, для одного из сгенерированных полей ввода я хочу назначить (click) вместо (keydown). Пример:

<app-xxx *ngFor="let el of fieldsElements" 
         [ngModel]="fieldsElements[el.name]"
         ...
         ...
         (click)="myFunction(yyy, zzz)">
</app-xxx>

Как я могу добиться этого динамически в HTML / View ? Я пробовал пару вариантов, используя *ngIf и некоторые другие параметры в файле ts, используя оператор if и addEventListener() et c. Никто из них не помог.

Любой намек или идея?

Answer 1

Я думаю, что наиболее эффективным будет использование переменной и использование способа 'variable && function'. Только если переменная имеет значение true, функция выполняется

<app-xxx *ngFor="let el of fieldsElements" 
         [ngModel]="fieldsElements[el.name]"
         ...
         ...
         (click)="el.allowClick && myFunction(yyy, zzz)">
         (keydown)="el.allowKeydown && myFunction(yyy, zzz)">
</app-xxx>

Обновить , например, если ваши fieldsElements представляют собой массив элементов, например

fieldsElements=[
  {name:"name1",allowClick:true},
  {name:"name2",allowKeyDown:true},
  {name:"name3"}]

"name1" выполнять функцию, когда (щелчок), «name2», когда (keyDown) и «name3» ничего не выполняют

Answer 2

Вы можете использовать * ngIf (и / или если / еще).

<div *ngFor=(etc. etc)>
    <div *ngIf="name === 'somename'" (click)="myFunction()">
    etc...
    <div>
    <div *ngIf="name !== 'somename'" (keydown)="myFunction()">
    etc...
    </div>
</div>

Таким образом, вы на самом деле не динамически переключаете обработчики, вы просто записываете нужный элемент на основе искомого имени. Но результат тот же.

Answer 3

Вы можете попробовать использовать несколько шаблонов внутри тега <app-xxx> и переключать их с помощью NgIf-Else