时间戳

首页 > 解决方案 > Angular 9将点击事件添加到动态按钮

angular - Angular 9将点击事件添加到动态按钮

问题描述

我有我需要为工具栏添加的按钮，我似乎无法正确地向它们添加点击事件，而不会感觉像黑客一样。

这是我设置/返回按钮的方式：

    export class ImportButtons {
      getButtons(): ButtonItem[] {
         return [new ButtonItem({
                 group: 'imports',
                 section: 'admin',
                 name: 'Approve',
                 class: 'btn btn-primary approve-all-button',
                 text: 'Approve',
                 hasMenu: true,
                 menuClass: 'approve-all-menu',
                 subItems: [new SubItem({ value: 'Approve All' })]
              }),
              new ButtonItem({
              group: 'imports',
              section: 'admin',
              name: 'OnHold',
              class: 'btn btn-primary on-hold-button',
              text: 'On Hold',
              hasMenu: true,
              menuClass: 'on-hold-menu',
              subItems: [new SubItem({ value: 'On Hold All' }),
              new SubItem({ value: 'Revert from On Hold' }),
              new SubItem({ value: 'Revert All from On Hold' })]
             })
           ];
      }
    }

这是在我的 html 中，它抓取并显示它们：

    <agc class="btn-group dropdown drop-button-container" ngbdropdown="" placement="bottom-right" ng-reflect-placement="bottom-right">
        <ng-container *ngFor="let buttons of this.fillTable('import', 'admin')">
           <ng-container *ngIf="buttons.hasMenu === true">
               <button class="{{buttons.class}}" type="button" (click)="buttonClicked( buttons );" > {{buttons.text}} </button>
               <button aria-haspopup="true" class="btn btn-primary dropdown-toggle dropdown-toggle-split admin-split-button icon-fa-caret-down" data-toggle="dropdown" ngbdropdowntoggle="" type="button" aria-expanded="false"></button>
               <ng-container *ngFor="let sub of buttons.subItems">
                 <agc class="dropdown-menu" ngbdropdownmenu="">
                 <span class="dropdown-item c-pointer" (click)="buttonClicked( buttons, sub )" >{{sub.value}}</span>
                 </agc>
               </ng-container>
           </ng-container>
        </ng-container>
      </agc>

我目前尝试在单击时调用一个方法（'buttonClicked()'），它告诉我单击了什么。但是当我单击一个按钮时，我会看到其余按钮闪烁，就好像它正在执行 PostBack。正因为如此，它感觉就像一个黑客。

有这样做的正确方法吗？添加的每个按钮都会在单击时（显然）具有自己的调用方法，并且我找不到在单击事件中使用字符串的方法。

例如，我最初在按钮类中有一个“click”属性，我将在其中放置要调用的方法名称 - 所以“click = 'onHoldClick($event)'”并且 html 点击看起来像“(click)='{ {buttons.click}}'" 但它不喜欢那样。

html 遍历它从方法“fillTable”中获取的按钮，它看起来像这样：

    fillTable(groupName: string, section: string): ButtonItem[] {           
       switch (this.page.currentPage) {
         case 'imports':
           return this.importButtons.getButtons().filter(n => n.section === section);
         case 'export':
           return this.exportButtons.getButtons().filter(n => n.section === section);
         case 'sales':
           return this.salesButtons.getButtons().filter(n => n.section === section);
         case 'bom':
           return this.bomButtons.getButtons().filter(n => n.section === section);
       }
     }

标签： angularangular-componentsdynamic-html

解决方案

我认为问题出在 *ngFor 中，当您使用函数时。我建议使用辅助变量

this.buttonsActual=this.fillTable('import', 'admin');

//and make the *ngFor using 
<ng-container *ngFor="let buttons of buttonsActual">

您也可以尝试使用 trackBy

顺便说一句，你的想法是正确的(click)="buttonClicked(button)"。好吧，您只能传递 button.name 或其他任何内容。然后你有两个方法，在函数中使用一个大开关

buttonClicked(button)
{
   switch (button.name)
   {
      case "...":
      break;
      case "...":
      break;
      ...
   }
}

或将差异函数存储在对象中

command={
  one:this.function1
  two:this.function2
}
function1(){..}
function2(){..}
//and in buttonClicked
buttonClicked(button)
{
   command[button.name]();
}

推荐阅读