Ionic2动态设置侧栏项

时间:2016-12-25 12:59:52

标签: angular ionic-framework ionic2

我正在使用离子2的最新版本。

离子版: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>

如果投诉状态为“新”,我想显示投诉项目。

那么,是否有可能针对某些特定情况显示投诉项目?我尝试使用 ngIf ,但它不起作用。

实现此类功能的最佳方式是什么?

1 个答案:

答案 0 :(得分:1)

在组件中有一个变量来检查敌人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>