离子3-动态添加离子段

Question

I am facing problem on adding the ion-segment values dynamically.. below are my work around..

TS file:

this.rioTypes = ['ABC', 'XYZ', 'PQR'];
  items1: any = [1, 2, 3, 4];
segmentVal: string = "ABC";

HTML:

<ion-segment [(ngModel)]="segmentVal" color="primary">
  <ion-segment-button *ngFor="let rioType of rioTypes; let i = index;" value="{{rioType}}">
    {{rioType.title}}
  </ion-segment-button>
</ion-segment>

<div [ngSwitch]="segmentVal" *ngFor="let r of rioTypes">

<ion-list *ngSwitchCase="r" ngSelected="selected">

   <ion-item  *ngFor="let item of items1">
    <h2>TAB - {{item}}</h2>
  </ion-item>
</ion-list>

Seems like everything looks fine but when i run in the device.. ony segments are displaying not below contents.. Im using Ionic v3.19.0 Please anybody help me to get it solve.

following error for below code

<div [ngSwitch]="segmentVal">

<ion-list *ngFor="let r of rioTypes" *ngSwitchCase="r" 
ngSelected="selected">

 <ion-item  *ngFor="let item of items1">
<h2>TAB - {{item}}</h2>
</ion-item>
</ion-list>

`Uncaught Error: Template parse errors: Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("

    <ion-list *ngSwitchCase="r" [ERROR ->]*ngFor="let r of rioTypes" ngSelected="selected">

       <ion-item  *ngFor="let item of "): ng:///AppModule/UserdashboardPage.html@29:36
at syntaxError (vendor.js:80395)
at TemplateParser.parse (vendor.js:104243)
at JitCompiler._parseTemplate (vendor.js:113630)
at JitCompiler._compileTemplate (vendor.js:113605)
at vendor.js:113507
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (vendor.js:113507)
at vendor.js:113377
at Object.then (vendor.js:80384)
at JitCompiler._compileModuleAndComponents (vendor.js:113376)`

Answer 1

The problem is you have ended up creating multiple ngSwitch blocks with your for loop. You need only one block with all the cases.

Use the loop for your list inside the switch. You can use ng-container or a plain div for the loop since you cannot have 2 directives in one tag.

<div [ngSwitch]="segmentVal">
<ng-container *ngFor="let r of rioTypes" >
<ion-list *ngSwitchCase="r">

   <ion-item  *ngFor="let item of items1">
    <h2>TAB - {{item}}</h2>
  </ion-item>
</ion-list>
</ng-container>
</div>