как отобразить 2 набора списков в одном списке с помощью ngFor (nativescript) - PullRequest
Новая
       29

как отобразить 2 набора списков в одном списке с помощью ngFor (nativescript)

0 голосов
/ 26 марта 2019

Использование nativescript для разработки приложения для iphone.Я пытаюсь отобразить 2 списка, используя ngFor, чтобы перебрать массив.

например ... мои данные выглядят так:

объект (this.metroGroup): 

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

Код шаблона: 

<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>

прямо сейчас отображается только желтый цвет ... он выглядит как желтые стеки в верхней части зеленого списка.есть идеи как отображать оба одновременно?

1 Ответ

1 голос
/ 26 марта 2019

Вам нужен родительский макет.Я создал образец детская площадка для вас.

<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>
...