Как отобразить разные типы элементов на разных сегментах нажатий кнопок в ионном режиме?
Я ссылался на этот пример из документации по ионным фреймворкам и создал свой собственный сегмент.
<div padding>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'puppies'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
...
</ion-list>
<ion-list *ngSwitchCase="'kittens'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-kitten-1.jpg">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
...
</ion-list>
</div>
Здесь они отображают разные списки ионов при разных нажатиях кнопок. Но я другой тип элемента, который будет отображаться на двух разных нажатий кнопок. Вот мой код
<div>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="audios">
Audios
</ion-segment-button>
<ion-segment-button value="images">
Images
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
//this is coming
<ion-list *ngSwitchCase="'audios'">
<p align="left">
Resources
</p>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<i class="material-icons rotate theme-color" item-start> format_align_center</i>
Lemon Exercise<span item-end>08:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>04:11</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end> 07:12</span>
</ion-item>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Audio File Name<span item-end>11:00</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>10:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end>10:12</span>
</ion-item>
</ion-list>
//this is not coming
<ion-grid *ngSwitchCase="'images'">
<div *ngFor="let images of image; let i = index;">
<ion-row *ngIf="i % 3 === 0">
<ion-col col-4 *ngIf="i < images.length">
<img [src]="images[i].url" />
</ion-col>
<ion-col col-4 *ngIf="i+1 < images.length">
<img [src]="images[i+1].url" />
</ion-col>
<ion-col col-4 *ngIf="i+2 < images.length">
<img [src]="images[i+2].url" />
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
в файле.ts я сохранил изображения как
this.image = [
{ url: 'assets/imgs/placeholder.png'},
{ url: 'assets/imgs/placeholder.png' },
{ url: 'assets/imgs/placeholder.png' }
];
Как вы можете видеть, я хочу отображать список ионов при нажатии кнопки первого сегмента и отображать сетку изображений при нажатии кнопки второго сегмента. На данный момент ничего не появляется, когда я нажимаю на вторую кнопку
1 ответ
Я думаю, что вы за цикл не правильно, вы используете цикл и внутри него, вы пытаетесь использовать индекс для каждого элемента, который не является массивом. Ниже код должен работать
<div>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="audios">
Audios
</ion-segment-button>
<ion-segment-button value="images">
Images
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'audios'">
<p align="left">
Resources
</p>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<i class="material-icons rotate theme-color" item-start> format_align_center</i>
Lemon Exercise<span item-end>08:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>04:11</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end> 07:12</span>
</ion-item>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Audio File Name<span item-end>11:00</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>10:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end>10:12</span>
</ion-item>
</ion-list>
<ion-grid *ngSwitchCase="'images'">
<div *ngFor="let image of images; let i = index;">
<ion-row>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
<ion-col col-4>
<img [src]="image.url" />
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>