在 ScrollView 中使用 ngFor 的 StackLayout

Question

我正在尝试通过将 StackLayout 与 ngFor（当然还有 ScrollView）结合使用来构建可滚动列表。

这是我的代码：

<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 中的最后一个元素。我想要的功能是顶部的文本框（在同一行上有一个 'add' 按钮），以及一个填充屏幕其余部分的可滚动列表。

Answer 1

你必须用 *ngFor 将你的 StackLayout 包装到另一个 Layout 容器中，这样 ScrollView 才能计算高度。

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

在 ScrollView 中使用 ngFor 的 StackLayout

StackLayout with ngFor inside ScrollView

nativescript

angular2-nativescript