Ionic2动态设置栏项目
问题描述:
我使用最新版本的离子2.Ionic2动态设置栏项目
离子版本:2.1.8
我想在侧边栏动态添加的项目。
app.component.ts;
export class MyApp {
pages: Array<{title: string, component: any, icon: any }>;
this.pages = [
{ title: 'Dashboard', component: DashboardComponent, icon: 'ios-home-outline' },
{ title: 'Complaints', component: ComplaintPage, icon: 'ios-sad-outline' },
{ title: 'Suggestions', component: SuggestionPage, icon: 'md-bulb' },
{ title: 'Appreciations', component: AppreciationPage, icon: 'ios-thumbs-up-outline' },
{ title: 'Poll', component: PollPage, icon: 'ios-stats-outline' },
{ title: 'Survey', component: SurveyPage, icon: 'ios-analytics-outline' },
{ title: 'ReportIssue', component: ReportIssuePage, icon: 'ios-bug-outline' },
];
}
app.html
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon item-left [name]="p.icon"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
我想说明的投诉项目,如果投诉状态为 'NEW'。
那么,是否可以显示某些特定条件的投诉项目?我尝试ngIf但它不起作用。
什么是实现这种功能的最佳方式?
答
在组件中有一个变量来检查对方new
的投诉。如果有的话,只需将该变量设置为true
即可。
export class MyApp {
this.cmpltStatus;
if(newCmplnt){
this.cmpltStatus = true;
} else{
this.cmpltStatus = false;
}
}
现在离子
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" *ngIf=(!cmpltStatus && p.title==='Complaints')>
<ion-icon item-left [name]="p.icon"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
+0
它只会在用户启动应用程序时才起作用,并且当时它有新的投诉。但当用户使用该应用程序时添加新投诉时,该功能将无法使用。因为app.component.ts在应用程序启动时被调用。并且它的变量在应用程序加载后不会动态改变。我正在寻找解决方案,我们可以随时从任何其他ts页面添加项目。 – kabir
当你试图'* ngIf'又如何呢? –
这个特定的条件可能会改变,然后在代码的其他部分?那么当这种情况发生时应该更新侧面菜单? – sebaferreras