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

Question

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

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

对象（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

您需要一个父布局。 我为您创建了一个样本游乐场 。

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