NgFor仅显示数组中的第一个值 [英] NgFor only showing first value in Array

问题描述

我正在Angular中建立一个动态菜单，而我的菜单仅显示数组中的第一个值.

I'm building a dynamic menu in Angular and my menu is only showing the first value in the array.

如何使其动态显示数组中的所有值?我在做什么错了?

How can I make it dynamically show all of the values in the array? What am I doing wrong?

在本地存储中设置了数组

Array is set in the local storage

阵列代码

FunctionNames: string[];
FunctionsActive: boolean[];

    this.FunctionNames = JSON.parse(localStorage.getItem('FunctionNames'));

View.component.html

   <!--Context Right Click Menu-->
  <mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
    <ng-container *ngFor="let function of FunctionNames">
    <ng-template matMenuContent let-action="action">
        <button mat-menu-item (click)="onContextMenuAction(action)">{{function}}</button>
    </ng-template>
  </ng-container>
  </mat-menu>

View.component.ts

    onContextMenu(event: MouseEvent, action: ViewDataSource) {
      event.preventDefault();
      this.contextMenuPosition.x = event.clientX + 'px';
      this.contextMenuPosition.y = event.clientY + 'px';
      this.contextMenu.menuData = { action: action };
      this.contextMenu.menu.focusFirstItem('mouse');
      this.contextMenu.openMenu();
    }

    onContextMenuAction(action: ViewDataSource ) {
      this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));
    }

已更新注释中的HTML代码

   <mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
        <ng-container>
          <div mat-menu-item *ngFor="let function of FunctionNames"> {{function}}
        <div matMenuContent *ngFor="let action of action;">
            <button mat-menu-item (click)="onContextMenuAction(action)">{{function}}</button>
        </div>
        </div>
      </ng-container>
      </mat-menu>

更新的操作数据集

      onContextMenuAction(action: ViewDataSource ) {


      this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));

    }

更新的上下文菜单HTML

        onContextMenu(event: MouseEvent, action: ViewDataSource) {
      event.preventDefault();
      this.contextMenuPosition.x = event.clientX + 'px';
      this.contextMenuPosition.y = event.clientY + 'px';
      this.contextMenu.menuData = { action: action };
      this.contextMenu.menu.focusFirstItem('mouse');
      this.contextMenu.openMenu();
      console.log(this.FunctionNames);
    }

    onContextMenuAction(action: ViewDataSource ) {
    console.log('clicked');

      // this.launchService.launchAction(this.line.targetActionTag.value, this.line.targetActionType);
      // tslint:disable-next-line: radix
      this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));
    //   debugger;

    }

推荐答案

您可以尝试使用此代码.希望这可以解决您的问题

Can you try using this code.Hope this will solve your problem

在.ts中，您可以将动作对象存储为

In .ts you can store the action object like

this.dataSource = new ViewDataSource(this.actionService);

和.html中(假设this.dataSource将存储您需要访问的实际操作对象)

and in .html (Assume this.dataSource will store the actual action object that you need to access)

<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
    <div mat-menu-item *ngFor="let function of FunctionNames">
      <ng-template matMenuContent>
        <button (click)="onContextMenuAction(dataSource)">{{function}}</button>
      </ng-template>
  </div>
  </mat-menu>

请确认您要在点击事件中访问的内容

Please confirm what you want to access in the click event

这篇关于NgFor仅显示数组中的第一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！