Angular 角度8+;PrimeNG PanelMenu-如何动态添加菜单项
是否可以根据从数据库获取的数据设置菜单项 从“@angular/core”导入{Component,OnInit}; 从'priming/api'导入{MenuItem}Angular 角度8+;PrimeNG PanelMenu-如何动态添加菜单项,angular,primeng,primeng-menu,Angular,Primeng,Primeng Menu,是否可以根据从数据库获取的数据设置菜单项 从“@angular/core”导入{Component,OnInit}; 从'priming/api'导入{MenuItem} @Component({ selector: 'app-questionnaire', templateUrl: './questionnaire.component.html', styleUrls: ['./questionnaire.component.scss'], }) export class Ques
@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=然后生成菜单项的模板中这样做。。。如果不可能,那么我会为菜单找到其他库…是的,这是可能的。您只需使用Angular的http客户端请求所需的数据,然后订阅该数据并将结果分配给
this.items
最棘手的部分是将您的API中的数据格式化为一种可以通过启动菜单面板理解的格式。 在下面的示例中,我调用了一个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[]));
}
这里有一个链接到如果在使用数据之前需要格式化数据,可以执行以下操作:
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[]));
}
另外,如果你觉得我的答案有帮助,不要忘记接受,因为人们有时会忘记=)