没有为带有使用 ngFor 生成的项目的 mat-menu 调用单击函数 [英] Click function not being called for a mat-menu with items generated with ngFor

问题描述

我在使用 *ngfor

实现 mat-menu 时遇到问题

我已经检查了这个答案 我如何将 *ngFor 与 mat-menu 和 mat-menu-item 一起使用? 我相信我正在遵循相同的方法，但我仍然遇到错误

渲染HTML相关部分是这个

<div class="mat-menu-content ng-tns-c53-4"><div _ngcontent-gka-c557="";class="ng-star-inserted";样式="><button _ngcontent-gka-c557=""垫菜单项="class="mat-focus-indicator mat-menu-item";角色=菜单项"tabindex=0"；咏叹调禁用=假">订单历史<div矩阵="class="mat-ripple mat-menu-ripple";ng-reflect-disabled=假"ng-reflect-trigger="[object HTMLButtonElement]"></div>
*<!--**绑定={ng-reflect-ng-for-of":[object Object]"}**-->

据我所知，当 angular 在渲染元素时出现问题时，它会显示

ng-reflect-ng-for-of":[对象对象]

这是 Angular HTML 源代码

<button mat-icon-button [matMenuTriggerFor]=菜单"><mat-icon fontSet="material-icons-outlined"class="对齐图标">{{图标名称}}</mat-icon><mat-menu #menu="matMenu"><div *ngFor="let menuItem of this.menuItems"><button mat-menu-item (click)=handleMenuItemClick(menuItem)">{{menuItem.description}}</button>

</mat-menu></span>

菜单本身显示正常，但是当我尝试单击该项目时，没有任何反应

我已经尝试将每个项目放在一个 ng-template 中，也放在它自己的组件上，但问题与以前一样.

这是什么原因造成的?

这是 IconContextMenuComponent

的 Typescript 文件

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';导出界面 IconMenuOption {身份证号码;描述:字符串；}导出接口 MenuOptionSelectedEvent {身份证:任何；selectedMenuOption: IconMenuOption}@成分({选择器:'wss-icon-context-menu',templateUrl: './icon-context-menu.component.html',styleUrls: ['./icon-context-menu.component.scss']})导出类 IconContextMenuComponent 实现 OnInit {构造函数(){}@Input() id:任意；@Input() 图标名称:字符串；@Input() menuItems: IconMenuOption[] = [];@Output() menuItemSelected = new EventEmitter();ngOnInit() {}公共句柄MenuItemClick(菜单项:IconMenuOption){const menuOptionSelectedEvent: MenuOptionSelectedEvent = {id:this.id，selectedMenuOption:菜单项};console.log({ menuOptionSelectedEvent: menuOptionSelectedEvent });this.menuItemSelected.emit(menuOptionSelectedEvent);}}

更新

这种方式我也试过，结果一样

<button mat-icon-button [matMenuTriggerFor]=菜单"><mat-icon fontSet="material-icons-outlined"class="对齐图标">{{图标名称}}</mat-icon><mat-menu #menu="matMenu"><button mat-menu-item *ngFor="let menuItem of this.menuItems";(click)=handleMenuItemClick(menuItem)">{{menuItem.description}}</button></mat-menu></span>``` html[1]:https://i.stack.imgur.com/RoCEr.png

解决方案

解决方案是在组件中有一个从 Input() 变量赋值的内部变量

@Input() menuItems: IconMenuOption[] = [];内部项目:IconMenuOption[]ngOnInit() {this.internalItems = this.menuItems;}

并从内部组件变量而不是从输入参数绑定菜单选项(组件项).

<button mat-menu-item *ngFor="let mi of internalItems";(click)=handleMenuItemClick(mi)">{{mi.description}}</button></mat-menu>

I'm having issues implementing a mat-menu with a *ngfor

I've checked this answer How can i use *ngFor with mat-menu and mat-menu-item? and I believe that I'm following the same approach but I still get errors

The render HTML relevant part is this

<div id="cdk-overlay-1" class="cdk-overlay-pane" style="pointer-events: auto; top: 451.766px; right: -6px;">
   <div tabindex="-1" role="menu" class="mat-menu-panel ng-trigger ng-trigger-transformMenu ng-tns-c53-4 mat-menu-below ng-star-inserted mat-elevation-z4 mat-menu-before" id="mat-menu-panel-0" ng-reflect-ng-class="[object Object]" style="transform-origin: right top;">
      <div class="mat-menu-content ng-tns-c53-4">
         <div _ngcontent-gka-c557="" class="ng-star-inserted" style="">
            <button _ngcontent-gka-c557="" mat-menu-item="" class="mat-focus-indicator mat-menu-item" role="menuitem" tabindex="0" aria-disabled="false">
               Order history
               <div matripple="" class="mat-ripple mat-menu-ripple" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
            </button>
         </div>
        *<!--**bindings={
            "ng-reflect-ng-for-of": "[object Object]"
            }**-->
      </div>
   </div>
</div>

To my understanding when angular has issues with rendering an element it shows the

ng-reflect-ng-for-of": "[object Object]

This is the Angular HTML source code

<span class='icm'>
    <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon fontSet="material-icons-outlined" class="aligned-icon">
            {{iconName}}
        </mat-icon>
        <mat-menu #menu="matMenu">
            <div *ngFor="let menuItem of this.menuItems">
                <button mat-menu-item  (click)="handleMenuItemClick(menuItem)">{{menuItem.description}}</button> 
            </div>
        </mat-menu>
    </button>
</span>

The menu itself is showing fine, but when I try to click on the item, nothing happens

I have tried placing each item in a ng-template and also on its own component with same problem as before.

What can be causing this ?

Here is the Typescript file for IconContextMenuComponent

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

export interface IconMenuOption {
  id: number;
  description: string;
}
export interface MenuOptionSelectedEvent {
  id: any;
  selectedMenuOption: IconMenuOption
}

@Component({
  selector: 'wss-icon-context-menu',
  templateUrl: './icon-context-menu.component.html',
  styleUrls: ['./icon-context-menu.component.scss']
})

export class IconContextMenuComponent implements OnInit {

  constructor() { }
  @Input() id: any;
  @Input() iconName: string;
  @Input() menuItems: IconMenuOption[] = [];
  @Output() menuItemSelected = new EventEmitter();

  ngOnInit() {
  }


  public handleMenuItemClick(menuitem: IconMenuOption) {
    const menuOptionSelectedEvent: MenuOptionSelectedEvent = {
      id: this.id,
      selectedMenuOption: menuitem
    };

    console.log({ menuOptionSelectedEvent: menuOptionSelectedEvent });
    this.menuItemSelected.emit(menuOptionSelectedEvent);
  }

}

UPDATE

I have also tried in this way, with the same results

<span class='icm'>
    <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon fontSet="material-icons-outlined" class="aligned-icon">
            {{iconName}}
        </mat-icon>
    </button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item *ngFor="let menuItem of this.menuItems"
            (click)="handleMenuItemClick(menuItem)">{{menuItem.description}}</button>
    </mat-menu>
</span>
``` html

  [1]: https://i.stack.imgur.com/RoCEr.png

解决方案

The solution is to have an internal variable in the component that is assigned from the Input() variable

@Input() menuItems: IconMenuOption[] = [];

internalItems: IconMenuOption[]

ngOnInit() {
  this.internalItems = this.menuItems;
}

And bind the menu-options (component items) from the internal component variable and not from the input parameter.

<mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let mi of internalItems" (click)="handleMenuItemClick(mi)">{{mi.description}}</button>
</mat-menu>

这篇关于没有为带有使用 ngFor 生成的项目的 mat-menu 调用单击函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！