2016-12-25 4 views
1

Я использую последнюю версию ионной 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, но его не работает.

Каков наилучший способ реализации таких функций?

+0

Где вы пытались '* ngIf' и как? –

+0

Может ли какое-то конкретное условие измениться тогда в какой-то другой части кода? Так должно ли боковое меню обновляться, когда это происходит? – sebaferreras

ответ

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> 
+0

он будет работать только тогда, когда пользователь начнет приложение и в это время у него появится новая жалоба. но он не будет работать, когда новая жалоба будет добавлена, когда пользователь будет использовать приложение. потому что app.component.ts вызывается, когда приложение запускается. и его переменная не изменится динамически после загрузки приложения. Я ищу решение, в котором мы можем добавить элемент с любой другой страницы ts в любое время. – kabir

Смежные вопросы