StackLayout с ngFor внутри ScrollView

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>

Проблемавозникает с ScrollView в конце основного StackLayout, который, по-видимому, показывает только последний элемент в ShoppingList.Функциональность, которую я хочу иметь, - это текстовое поле сверху (с кнопкой «добавить» в той же строке) и прокручиваемый список, заполняющий остальную часть экрана.

Answer 1

Вы должны обернуть ваш StackLayout с помощью * ngFor в другой контейнер Layout, чтобы ScrollView мог рассчитать высоту.

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