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

Question

我有一个StackLayout的小视野。使用 tns preview 时，内部组件将按指定顺序按预期显示。但是，在使用 apk 时，CheckBoxes 显示为 StackLayout 的最后一个组件。原因似乎是使用 ngFor.

这里有两张截图说明了这个问题：

Correct behavior when using tns preview

Incorrect behavior when using 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

已在@nativescript/angular 10.1.4 和 10.1.5

中修复

Answer 2

在以后的版本中是known issue which already has been fixed。

如果由于某种原因您无法更新您的框架版本，作为快速修复，您可以将您的 *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>

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

ngFor inside StackLayout is displayed as last component after building apk

angular

nativescript

nativescript-angular