ngFor在StackLayout中显示为构建apk后的最后一个组件

Question

我有一个StackLayout的小视图。当使用tns preview时，内部组件按照指定的顺序显示。使用apk时，CheckBoxes显示为StackLayout的最后一个组件。原因似乎是ngFor的使用。

下面两个截图说明了这个问题:

使用tns预览时的正确行为

使用apk时的错误行为

下面是我的代码:

<app-action-bar title="{{getTitle()}} - Lernen"></app-action-bar>
<StackLayout>
<Label text="{{currentQuestion.question}}" textwrap="true"></Label>
<CheckBox *ngFor="let answer of this.userAnswers" text="{{answer.answer}}"></CheckBox>
<Button text="Weiter!"></Button>
<Button text="Feedback"></Button>
</StackLayout>

我非常欢迎任何帮助!

Answer 1

这是一个已知的问题，在以后的版本中已经修复了。

如果由于某种原因你不能更新你的框架版本，作为一个快速修复，你可以把你的*ngFor包装到一个额外的容器中，以保持顺序。在您的示例中，它可能如下所示:

<StackLayout>
<Label text="{{currentQuestion.question}}" textwrap="true"></Label>
<StackLayout>
<CheckBox *ngFor="let answer of this.userAnswers" text="{{answer.answer}}"></CheckBox>
</StackLayout>
<Button text="Weiter!"></Button>
<Button text="Feedback"></Button>
</StackLayout>

Answer 2

已修复于@nativescript/angular 10.1.4和10.1.5