时间戳

首页 > 解决方案 > NgFor 只显示数组中的第一个值

javascript - NgFor 只显示数组中的第一个值

问题描述

我正在 Angular 中构建一个动态菜单，我的菜单只显示数组中的第一个值。

如何让它动态显示数组中的所有值？我究竟做错了什么？

在本地存储中设置数组

数组代码

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>

查看.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;

    }

标签： javascripthtmlangulartypescriptangular-material

解决方案

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

在 .ts 中，您可以存储操作对象，例如

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

并在 .html 中（假设this.dataSource将存储您需要访问的实际操作对象）

<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>

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

推荐阅读