이오닉 - ng 용으로 만들어진 목록 항목에 다른 아이콘 추가

Question

으로 작성한 목록의 각 항목에 특정 아이콘을 표시하는 방법이 있습니까? 용? 메뉴 항목을 자동으로 생성하지 않는 것이 더 좋습니까?

app.html

<ion-menu [content]="mainContent"> 
<ion-content id="side-menu" style="background-color:#7A5258;"> 
    <ion-list no-lines id="menu-list"> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
      <ion-icon name="ios-bookmark"></ion-icon> 
      {{p.title}} 
     </button> 
    </ion-list> 
</ion-content> 

app.component.ts

export class MyApp { 
@ViewChild(Nav) nav: Nav; 
rootPage: any = HomePage; 

pages: Array<{ title: string, component: any }>; 

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { 
    platform.ready().then(() => { 
     statusBar.styleDefault(); 
     splashScreen.hide(); 
    }); 

    // ngFor menu items 
    this.pages = [ 
     {title: 'Home', component: HomePage}, 
     {title: 'Bookmarks', component: BookmarksPage}, 
     {title: 'Help', component: HelpPage}, 
     {title: 'Settings', component: SettingsPage}, 
    ]; 
} 

openPage(page) { 
    this.nav.setRoot(page.component); 
} 

은}

Answer 1

당신은 pages 배열 A를 추가해야 다음과 같습니다.

참고 : 당신이 원하는대로 icons을 변경하십시오.

app.component.ts

// ngFor menu items 
    this.pages = [ 
     {title: 'Home', component: HomePage, icon: 'play'}, 
     {title: 'Bookmarks', component: BookmarksPage, icon: 'play'}, 
     {title: 'Help', component: HelpPage, icon: 'play'}, 
     {title: 'Settings', component: SettingsPage, icon: 'play'}, 
    ]; 

app.html 많은 이해

<ion-menu [content]="mainContent"> 
<ion-content id="side-menu" style="background-color:#7A5258;"> 
    <ion-list no-lines id="menu-list"> 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
      <ion-icon [name]="p.icon" item-left></ion-icon> 
      {{p.title}} 
     </button> 
    </ion-list> 
</ion-content>