如何使用 ngFor (nativescript) 在同一个列表中显示 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

您需要一个父布局。我为您创建了一个示例 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>

如何使用 ngFor (nativescript) 在同一个列表中显示 2 组列表

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

arrays

nativescript

ngfor

nativescript-angular

angular