如何使用ngFor（nativescript）在同一列表中显示2组列表

Question

使用nativescript开发iPhone应用程序。我正在尝试使用ngFor显示2个列表来循环遍历数组。

例如......我的数据看起来像这样

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

现在只显示黄色....它似乎是绿色列表顶部的黄色堆栈。有关于如何同时显示两者的任何想法？

Answer 1

您需要父布局。我为你创建了一个样本playground。

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