Nativescript StackLayout与NGF一起用于内部滚动视图

我试图通过使用带有ngFor（当然还有ScrollView）的StackLayout来构建一个可滚动列表

这是我的代码：

<StackLayout class="home-panel" verticalAlignment="top">
    <StackLayout orientation="horizontal">
        <!--Suggest Append SuggetAppend -->
        <RadAutoCompleteTextView #autocmp [items]="items" suggestMode="Suggest" displayMode="Plain" width="80%">
            <SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="300">
                <ng-template tkSuggestionItemTemplate let-item="item">
                    <StackLayout orientation="vertical" padding="10">
                        <Label [text]="item.text"></Label>
                    </StackLayout>
                </ng-template>
            </SuggestionView>
        </RadAutoCompleteTextView>

        <Button text="Add" (tap)="onAdd()" width="20%"></Button>
    </StackLayout>

    <ScrollView>
        <StackLayout *ngFor="let item of this.shopList">
            <Label text="{{item}}" (tap)="itemSelected(item)" fontSize="36"></Label>
        </StackLayout>
    </ScrollView>

</StackLayout>

---

问题出现在主StackLayout末尾的ScrollView上，它显然只显示shoppingList中的最后一个元素。我想要的功能是在顶部有一个文本框（在同一行上有一个“添加”按钮），屏幕的其余部分有一个可滚动列表。

您必须使用*ngFor将StackLayout包装到另一个布局容器中，以便ScrollView可以计算高度

...
    <ScrollView>
        <StackLayout>
            <StackLayout *ngFor="let item of this.shopList"> 
                <Label text="{{item}}" fontSize="36"></Label>
            </StackLayout>
        </StackLayout>
    </ScrollView>
...

。。。
...

您必须使用*ngFor将StackLayout包装到另一个布局容器中，以便ScrollView可以计算高度

...
    <ScrollView>
        <StackLayout>
            <StackLayout *ngFor="let item of this.shopList"> 
                <Label text="{{item}}" fontSize="36"></Label>
            </StackLayout>
        </StackLayout>
    </ScrollView>
...

。。。
...