[英]Angular 8 + PrimeNG PanelMenu - how to dynamically add menu items
是否可以根據從數據庫獲取的數據設置菜單項?
從“@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= 然后生成菜單項......如果不可能,那么我會找到其他一些庫對於菜單...
是的,有可能。
您只需要使用 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[]));
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.