Using [NgSwitch] inside *NgFor, but why not the other way around?

Ionic Framework ionic-v3
1

I was wondering, why NgFor works inside an ngSwich, but ngSwitch doesnt work inside an ngFor the other way around. I hope this doesnt sound like a stupid question :thinking:

While the following code does work:

<ion-list  radio-group [(ngModel)]="selected"  (ionChange)="loadc(selected)"><span [ngSwitch]="lanugage">
        
            <span  *ngSwitchCase="'spanish'">
            <ion-item  *ngFor="let chapter of menuArray">
                <ion-label >{{chapter.sptitle}}</ion-label>
                <ion-radio checked="{{chapter.cchap == checked}}" value="{{chapter.id}}" ></ion-radio>      
            </ion-item>
            </span>
                
            <span *ngSwitchCase="'japanese'">
            <ion-item  *ngFor="let chapter of menuArray">
                <ion-label >{{chapter.jatitle}}</ion-label>
                <ion-radio checked="{{chapter.cchap == checked}}" value="{{chapter.id}}" ></ion-radio>
            </ion-item>
            </span>
                
            <span *ngSwitchCase="'english'">
            <ion-item  *ngFor="let chapter of menuArray">
                <ion-label >{{chapter.engtitle}}</ion-label>
                <ion-radio checked="{{chapter.cchap == checked}}" value="{{chapter.id}}" ></ion-radio>
            </ion-item>
            </span>

                 
    </span>
</ion-list>

This doesnt work:

<ion-list  radio-group [(ngModel)]="selected"  (ionChange)="loadc(selected)"><span [ngSwitch]="lanugage">
            
            <ion-item  *ngFor="let chapter of menuArray">
                <ion-label >
                <span [ngSwitch]="language">
                         <span  *ngSwitchCase="'spanish'">{{chapter.sptitle}}</span>
                         <span  *ngSwitchCase="'japanese'">{{chapter.jatitle}}</span>
                         <span  *ngSwitchCase="'english'">{{chapter.engtitle}}</span>
               </span>
               </ion-label>
                <ion-radio checked="{{chapter.cchap == checked}}" value="{{chapter.id}}" ></ion-radio>      
            </ion-item>
</ion-list>

Did I miss something or it’s just no good practice to use ngFor inside an ngSwitch but the other way around?

2

This seems like a rather unscalable way of going about this. Why not just make chapter.title[language] simply work for any supported value of language? That eliminates the need for the switch, allows you to add more supported languages easily without modifying lots of template code, and gets rid of the error-prone and inconsistently named *title properties.

3

thanks for the reply, I tried something like this as you recommended, as I guess you meant to wrap the title property in an array :

public menuArray = [
    {
                id: 0,
                cchap: '01',
                title:[{spn :'sometext', ja:'sometext', chi:'sometext, eng:'sometext', thai:'sometext'}]
        },
    {
                id: 1,
                cchap: '02',
                title:[{spn :'sometext', ja:'sometext', chi:'sometext, eng:'sometext', thai:'sometext'}]
        },

]

and then in the ngFor I do this:

chapter.title[language]

it returns and error e.g. when language is set to “eng”:

Cannot read property 'eng' of undefined

did i do wrong in the array?

and… for sake of the argument, sometimes becuz of the length of text in some language, i hv to load some other text in specific cases, some content are not inter-changable between languages, which using ngSwitch would be an easier choice. then in such case, why ngFor does not work inside an ngSwitch?

4

Lose the square brackets on title: you’ve made a one-element array instead of just an object.