Ionic Segments

#1

Hi I am trying to work with ionic segments and for some reason I am not able to use a ngFor to loop through an array and display the information.

For example:
In news.html file

<div padding>
    <ion-segment [(ngModel)]="segments" color="orangeColor">
      <ion-segment-button value="featured">
        Featured
      </ion-segment-button>
      <ion-segment-button value="organisations">
        Charities
      </ion-segment-button>
    </ion-segment>
  </div>

<div [ngSwitch]="segments">

    <ion-list *ngSwitchCase="'organisations'">

 <ion-card>
        <img src="assets/imgs/saveTrees.png" />
        <ion-card-content>
          <ion-card-title>
            Save Trees Org
          </ion-card-title>
          <p>
            Help preserve the natural environment by growing more trees
          </p>
        </ion-card-content>
      </ion-card>

    </ion-list>

In news.ts: segments is the only code i have defined.

export class NewsPage {
 segments = "featured";
featuredOrganisations = [];

and I have defined the objects within the featuredOrganisation array

Since this is static information, It is able to display this information. But when I add a *ngFor,

For instance, when I run

<ion-list *ngSwitchCase="'featured'">
      <ion-list  *ngFor="let organisation of featuredOrganisations">
        <ion-item>
          <ion-card>
        <img src="{{organisation.image}}" />
        <ion-card-content>
          <ion-card-title>
            {{organisation.title}}
          </ion-card-title>
          <p>
            {{organisation.description}}
          </p>
        </ion-card-content>
      </ion-card>
        </ion-item>
      </ion-list>

I do not get any output.

Can anyone please tell me where I am going wrong?

#2

Nesting <ion-list> like this seems strange. What happens if you turn the outer ion-list (the one with the ngSwitchCase) into an ng-container?

#3

Hi, thanks for taking the time to reply. I got irritated using switch so I managed to solve it with ngIF instead. I just set a boolean value

<div padding>
    <ion-segment color="orangeColor">
      <ion-segment-button value="featured" (click)="loadFeatured()">
        Featured
      </ion-segment-button>
      <ion-segment-button value="organisations" (click)="loadAllOrganisations()">
        Charities
      </ion-segment-button>
    </ion-segment>
  </div>

<ion-list *ngIf="segments==false">

    <ion-card *ngFor="let organisation of allOrganisations">
      <img src="{{organisation.image}}" (click)="loadProject(organisation)" />
      <ion-card-content>
        <ion-card-title>
          {{organisation.title}}
        </ion-card-title>
        
      </ion-card-content>
    </ion-card>
  </ion-list>

  <ion-list *ngIf="segments">
    <ion-card *ngFor="let organisation of featuredOrganisations">
      <img src="{{organisation.image}}" (click)="loadProject(organisation)"/>
      <ion-card-content>
        <ion-card-title>
          {{organisation.title}}
        </ion-card-title>
        
      </ion-card-content>
    </ion-card>

  </ion-list>

Thanks for your help though!