Ion-segment does not work properly with dynamic data

Ionic Framework ionic-v3
1

Hi,

I am trying to achieve ion-segment functionality using dynamic data but somehow, it’s not working properly. Though, the cutePuppyPics example works fine.

This is my template code:

<ion-header>
  <ion-navbar no-border-bottom>
      <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
      Departments
    </ion-title>
  </ion-navbar>

</ion-header>

<ion-content>

	<ion-segment [(ngModel)]="deptFor" dark>
		<ion-segment-button *ngFor="let seg of segments" value="{{seg}}">
			{{seg}}
		</ion-segment-button>
	</ion-segment>

  <div [ngSwitch]="deptFor" *ngFor="let seg of segments">
    <ion-list *ngSwitchCase="'{{seg}}'">
      <ion-item>
        <h2> {{seg}}</h2>
      </ion-item>
    </ion-list>
 </div> 
</ion-content>

My observations are:

  1. The ion-segment-buttons are displayed but “” is populated for all the buttons instead of only active / selected ion-segment-button.
  2. In the ion-segment-button, aria-pressed=“true/false” attribute is missing
  3. Because of use of ngFor, in ion-segment-button, ng-reflect-value attribute is added (this should be normal behaviour)
  4. The dynamic value in ngSwitchcase is getting passed as literal text because of single quotes

The “ionic info” command output is:

Cordova CLI: 6.3.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS:
Node Version: v5.3.0

One more thing, on the click of ion-segment button, I would like to refresh the content dynamically using ngSwitchcase. If there is any codepen / plunkerwith such example, please share it.

This functionality is absolutely essential for my app. Any help would be highly appreciated.

Thank you.

1 Like
2

I am having the same issue, any way to solve it?

Thank you!

3

As I can see NgSwitch only accepts regular strings, no variables or combination of both. In the old documentation it is as a hint included (https://docs.angularjs.org/api/ng/directive/ngSwitch).

1 Like
4

Anyone managed to find solution or walk around to make ng-segment dynamic .

5

Thanks for the workaround!
I lost half an hour trying to figuring out why was not working as it should…

6

What was the workaround?

7

To use strings for the ngSwitch

9

i tried using the same, but ngSwitcCase didnot work as expected.

    <ion-segment [(ngModel)]="switchkey" color="primary">
        <ion-segment-button *ngFor="let key of floatkey; let i=index; ">
                    {{key}}
              
        </ion-segment-button>
  </ion-segment>

    <div class="panel-tab" >
        
    <div  *ngFor="let key of floatkey; let i=index">{{key}}
               <ion-list>
               <div [ngSwitch]="switchkey">
               <div class="panel-cash">
                  <div class="panelcash-heading">Cash</div>
                  <div class="row header">  
                      <div class="col">Currency Type</div>
                      <div class="col">Sales</div>
                      <div class="col">Float</div>
                  </div>

                <div class="row" *ngFor="let ca of values.pouchcash;let i=index">
                      <div class="col">{{ca.currency}}</div>
                      <div class="col">{{ca.sales}}</div>
                      <div class="col">{{ca.float}}</div>
                  </div>
              </div>

              <div class="panel-credit">
                  <div class="panelcredit-heading">Credit Card</div>
                  <div class="row header">    
                      <div class="col">Currency Type</div>
                      <div class="col">Sales</div>
                      <div class="col">Float</div> 
                </div>
 
                  <div class="row" *ngFor="let cr of values.pouchcredit" >
                      <div class="col">{{cr.currency}}</div>
                      <div class="col">{{cr.sales}}</div>
                      <div class="col">{{cr.float}}</div>
                  </div>
              </div>
              </div>
                </ion-list >
    
        </div>
 
      </div>

i need to dynamically add segments based on the nuumber of floats.

my json.

{
“float1”: [
{
“pouchcash”: [
{
“currency”: “QAR”,
“sales”: “1205”,
“float”: “150”
},
{
“currency”: “USD”,
“sales”: “125”,
“float”: “15”
}
]
},
{
“pouchcredit”: [
{
“currency”: “QAR”,
“sales”: “1305”,
“float”: “50”
}
]
}
],
“float2”: [
{
“pouchcash”: [
{
“currency”: “INR”,
“sales”: “1200”,
“float”: “100”
}
]
},
{
“pouchcredit”: [
{
“currency”: “INR”,
“sales”: “N/A”,
“float”: “N/A”
}
]
}
]
}

please help me on this

10

how can I put a condition next to *let job of jobs for example (status:“true”)

              <ion-list  *ngSwitchCase="'1'" > 
                    <ion-item-sliding *ngFor="let job of jobs">