how to display 2 sets of lists in the same list using ngFor (nativescript)

Question

Using nativescript to develop an iphone app. I'm trying to display 2 lists using ngFor to loop through an array.

for example...my data looks like this

object (this.metroGroup):

{
    YL: [{
            "Line": "Shady Grove",
            "Min": 2,
        }, { 
            "Line": "Glenmont",
            "Min": 4,
        }],
    GR: [{
            "Line": "Blue Field",
            "Min": 6,
        }, { 
            "Line": "Green Line",
            "Min": 8,
        }]
}

Template code:

<ScrollView row="1">
            <StackLayout *ngIf="metroGroup.GR">
                <Label text="Green" class="train-stop-label"></Label>
                <StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
                    <Label class="h3" [text]="metro.Line"></Label>
                    <Label class="h3" [text]="metro.Min"></Label>
                </StackLayout>
            </StackLayout>
            <StackLayout *ngIf="metroGroup.YL">
                <Label text="Yellow" class="train-stop-label"></Label>
                <StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
                    <Label class="h3" [text]="metro.Line"></Label>
                    <Label class="h3" [text]="metro.Min"></Label>
                </StackLayout>
            </StackLayout>
</ScrollView>

right now only the yellow is displayed....it seems like the yellow stacks on top of the green list. have any ideas on how to display both at the same time?

Answer 1

You need a parent Layout. I have created a sample playground for you.

<ScrollView class="page">
        <StackLayout class="home-panel">
            <StackLayout *ngIf="metroGroup.GR">
                <Label text="Green" class="train-stop-label"></Label>
                <StackLayout *ngFor="let metro of metroGroup.GR" class="list-group-item">
                    <Label class="h3" [text]="metro.Line"></Label>
                    <Label class="h3" [text]="metro.Min"></Label>
                </StackLayout>
            </StackLayout>
            <StackLayout *ngIf="metroGroup.YL">
                <Label text="Yellow" class="train-stop-label"></Label>
                <StackLayout *ngFor="let metro of metroGroup.YL" class="list-group-item">
                    <Label class="h3" [text]="metro.Line"></Label>
                    <Label class="h3" [text]="metro.Min"></Label>
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </ScrollView>