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

问题描述

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

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

数组设置在本地存储

数组代码

FunctionNames: string[];功能活动:布尔[]；this.FunctionNames = JSON.parse(localStorage.getItem('FunctionNames'));

View.component.html

 <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-模板></ng-容器></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('鼠标');this.contextMenu.openMenu();}onContextMenuAction(动作:ViewDataSource){this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));}

更新了评论中的 HTML 代码

 <ng-容器><div mat-menu-item *ngFor="let function of FunctionNames">{{功能}}<div matMenuContent *ngFor="let action of action;"><button mat-menu-item (click)=onContextMenuAction(action)">{{function}}</button>

</ng-容器></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('鼠标');this.contextMenu.openMenu();console.log(this.FunctionNames);}onContextMenuAction(动作:ViewDataSource){console.log('点击');//this.launchService.launchAction(this.line.targetActionTag.value, this.line.targetActionType);//tslint:disable-next-line: 基数this.launchService.launchAction(parseInt(action[0]), parseInt(action[3]));//调试器；}

解决方案

你能试试用这个代码吗.希望这能解决你的问题

在 .ts 中，你可以像这样存储动作对象

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

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

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

</mat-menu>

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

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

Array Code

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]));
    }

Updated HTML Code from Comment

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

Updated Action Dataset

      onContextMenuAction(action: ViewDataSource ) {


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

    }

Updated Context Menu 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

In .ts you can store the action object like

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

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