时间戳

首页 > 解决方案 > Angular 8 + PrimeNG PanelMenu - 如何动态添加菜单项

angular - Angular 8 + PrimeNG PanelMenu - 如何动态添加菜单项

问题描述

是否可以根据从数据库中获取的数据设置菜单项？

从“@angular/core”导入 {Component, OnInit}；从'primeng/api'导入{MenuItem}；

@Component({
  selector: 'app-questionnaire',
  templateUrl: './questionnaire.component.html',
  styleUrls: ['./questionnaire.component.scss'],
})
export class QuestionnaireComponent implements OnInit {
  items: MenuItem[];

  constructor() {
  }

  ngOnInit() {
    this.items = [
      {
        label: 'Environmental',
        items: [
          {
            label: 'Question 1',
            icon: 'pi pi-circle-on',
          },
          {
            label: 'Question 2',
            icon: 'pi pi-circle-on',
          },
          {
            label: 'Question 3',
            icon: 'pi pi-circle-on',
          },
        ],
      }, {
        label: 'Social',
        items: [
          {
            label: 'Question 4',
            icon: 'pi pi-circle-on',
          },
          {
            label: 'Question 5',
            icon: 'pi pi-circle-on',
          },
          {
            label: 'Question 6',
            icon: 'pi pi-circle-on',
          },
        ],
      },
      {
        label: 'Governance',
        items: [
          {
            label: 'Question 7',
            icon: 'pi pi-circle-on',
          },
          {
            label: 'Question 8',
            icon: 'pi pi-circle-on',
          },
          {
            label: 'Question 9',
            icon: 'pi pi-circle-on',
          }, {
            label: 'Question 10',
            icon: 'pi pi-circle-on',
          },
        ],
      },
    ];
  }
}

和我的模板：

<div class="questionnaire questionnaire-container">
  <div class="intro"></div>
  <div class="content">
    <div class="progress-bar">
      PROGRESS BAR
    </div>
    <div class="side-menu">
      <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
    </div>
    <div class="questionnaire-content">
      QUESTIONNAIRE CONTENT
    </div>
  </div>
</div>

我问你是因为我不知道是否可以在组件中做到这一点，而不是在我可以使用 *ngFor= 然后生成菜单项的模板中......如果不可能，那么我会找到其他一些库对于菜单...

标签： angularprimengprimeng-menu

解决方案

是的，有可能。
你只需要使用 Angular 的 http 客户端来请求你想要的数据，然后订阅它并将结果分配给this.items.
最棘手的部分是将 API 中的数据格式化为 PrimeNG 菜单面板可以理解的格式。在下面的示例中，我调用了一个 API，该 API 返回给我一个可以直接分配给我的格式化项目this.items：

  ngOnInit() {
    this.http
      .get("https://express-demo-feat-test2-s8pihd.herokuapp.com/api/items")
      .subscribe(data => (this.items = data as MenuItem[]));
  }

这是stackblitz 演示
的链接 如果您需要在使用数据之前对其进行格式化，您可以执行以下操作：

  ngOnInit() {
    this.http
      .get("https://express-demo-feat-test2-s8pihd.herokuapp.com/api/items")
      .pipe(
         map(data => {
           // do some formatting
         })
      )
      .subscribe(data => (this.items = data as MenuItem[]));
  }

推荐阅读