Angular9 给动态按钮添加点击事件

Question

我有一些按钮需要添加到工具栏，但我似乎无法正确地向它们添加点击事件，这让我感觉很糟糕。

这是我 setup/return 我的按钮的方式：

    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()') 时调用一个方法，它告诉我单击了什么。但是当我单击一个按钮时，我看到其余按钮闪烁，就好像它正在执行回发一样。正因为如此，感觉就像一个 hack。

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

例如，我最初在我的按钮 class 中有一个 '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);
       }
     }

Answer 1

我认为问题出在您使用函数时的 *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]();
}

Angular9 给动态按钮添加点击事件

Angular 9 Add click event to dynamic buttons

angular

angular-components

dynamic-html