Question

是否有办法为使用 ngFor 制作的列表中的每个项目设置特定图标？不自动生成菜单项会更好吗？

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数组中，如下所示。

注意：根据需要更改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>

离子 - 添加不同的图标以列出使用ngFor制作的项目

1 个答案: