angular - 尽管列表项数组包含更多值，但一次只能显示一个列表项

Question

我有一个问题，即一次只显示一个列表项，尽管迭代列表中有多个项目。我不确定这是由于布局问题还是其他原因。

当我转储时myForm.get('questions').controls，我可以看到那里有多个控件，我点击addQuestion按钮的次数越多。

有什么问题？

这是我的表格：

public myForm: FormGroup = this.fb.group({
  questions: this.fb.array([]),
});

传递给列表视图：

<StackLayout orientation="vertical">
  <ListView [items]="myForm.get('questions').controls">
    <ng-template let-question="item">
      <StackLayout orientation="vertical">
        <question [question]="question"></question>
      </StackLayout>
    </ng-template>
  </ListView>
  <StackLayout orientation="horizontal">
    <Button class="btn btn-xs btn-primary" text="textfield" (tap)="addQuestion('textfield')"></Button>
  </StackLayout>
</StackLayout>

当您单击添加问题按钮时，它会运行，它将一个新项目添加到列表中：

 getQuestion(type: string): FormGroup {

    return this.fb.group({
      type: type,
      label: null,
      question: '',
      answer: null
    });
  }

  addQuestion(type: string): void {
    this.questions.push(this.getQuestion(type));

    // Dumped the value rather than the controls to make it clearer what the array contains
    console.dump(this.questions.value) 
  }

<question>组件模板：

<StackLayout class="question-item" [formGroup]="question">
    <TextField class="label input" formControlName="question" hint="Question"></TextField>
    <TextField class="input" formControlName="answer" hint="Answer"></TextField>
  </StackLayout>

这是单击按钮后转储的屏幕截图：

但是正如您在此处看到的那样，仅显示一项（我在此处隐藏了粘贴模板中的一些按钮，因此更具可读性）：

编辑：我刚刚尝试了一个包含一些对象的普通数组。即使这样，也只有第一个出现。