NativeScript 角度未在正确位置显示项目答案

【问题标题】：NativeScript angular not displaying items at right positionNativeScript 角度未在正确位置显示项目
【发布时间】：2019-09-07 17:33:56
【问题描述】：

我有一个类别列表，其中包含我想显示为的类别项目：

类别 1
- 列表项
- 列表项
类别 2
- 列表项
- 列表项

NativeScript 将输出呈现如下；

类别 2
- 列表项
- 列表项
- 列表项
- 列表项

代码：

<ActionBar class="action-bar" title="Filter">
    <ActionItem tap="onSaveFilter" icon="res://done" android.position="actionBar"></ActionItem>
</ActionBar>

<StackLayout class="page page-content" orientation="vertical">

    <ng-container *ngFor="let category of filter.categoryFilterItems">
        <Label class="filter-category-title" text="{{ category.name }} - {{ category.filterItemModels.length }}"></Label>

        <ng-container *ngFor="let filterItem of category.filterItemModels">
            <DockLayout class="filter-item" stretchLastChild="false" *ngIf="filterItem.isVisible()">
                <Label class="filter-title" text="{{ category.name }} -  {{ filterItem.name}}" dock="left"></Label>

                <ng-container [ngSwitch]="filterItem.controlType">

                    <StackLayout *ngSwitchCase="FilterItemControlType.Textbox">
                        <Label [text]="filterItem.value | date"></Label>
                        <Label class="fa" text="&#xf073;"></Label>
                    </StackLayout>

                    <DropDown *ngSwitchCase="FilterItemControlType.Dropdown" backroundColor="white"
                        [items]="filterItem.options" (selectedIndexChanged)="filterItem.onSelectedIndexChange($event)"
                        row="0" colSpan="2" dock="right">
                    </DropDown>

                </ng-container>

            </DockLayout>
        </ng-container>

    </ng-container>

</StackLayout>

如果我像下面这样手动创建过滤器项目，它就可以正常工作。

<Label class="filter-category-title" text="Algemeen"></Label>

<DockLayout class="filter-item" stretchLastChild="false">
    <Label class="filter-title" text="Beurs" dock="left"></Label>
    <DropDown #country backroundColor="white" [items]="exchangeOptions" (selectedIndexChanged)="onExchangeChange($event)"
        row="0" colSpan="2" dock="right"></DropDown>
</DockLayout>

【问题讨论】：

标签： angular nativescript

【解决方案1】：

事实证明，我不得不使用 StackLayout 而不是 ng-container..

<ActionBar class="action-bar" title="Filter">
    <ActionItem tap="onSaveFilter" icon="res://done" android.position="actionBar"></ActionItem>
</ActionBar>

<StackLayout class="page page-content" orientation="vertical">

    <StackLayout *ngFor="let category of filter.categoryFilterItems">
        <Label class="filter-category-title" text="{{ category.name }} - {{ category.filterItemModels.length }}"></Label>

        <ng-container *ngFor="let filterItem of category.filterItemModels">
            <DockLayout class="filter-item" stretchLastChild="false" *ngIf="filterItem.isVisible()">
                <Label class="filter-title" text="{{ category.name }} -  {{ filterItem.name}}" dock="left"></Label>

                <ng-container [ngSwitch]="filterItem.controlType">

                    <StackLayout *ngSwitchCase="FilterItemControlType.Textbox" dock="right" orientation="horizontal">
                        <Label [text]="filterItem.value | date"></Label>
                        <Label class="fa" text="&#xf073;"></Label>
                    </StackLayout>

                    <DropDown *ngSwitchCase="FilterItemControlType.Dropdown" backroundColor="white"
                        [items]="filterItem.options" (selectedIndexChanged)="filterItem.onSelectedIndexChange($event)"
                        row="0" colSpan="2" dock="right">
                    </DropDown>

                </ng-container>

            </DockLayout>
        </ng-container>

    </StackLayout>

</StackLayout>

【讨论】：