Question

是否可以在Angular 2中使用ngFor迭代创建独立的子组件？

我正在制作一个带结构的测验应用程序，其中一个Quiz组件有多个Categories，一个类别有多个Questions。

Angular将从REST API中检索的Quiz生成表单，用户可以在不同类别的问题之间来回导航，最后保存部分或提交完整表单。

我为应用程序模板绘制了以下伪结构：

<html>
  <form>
    <category>
      <question *ngFor="let question of questions" />
    <category>
    <navigate/>
  </form>
</html>

Quiz component有一个类别列表和对活动类别的引用。 Category component有输入绑定以反映测验的有效类别。 Category包含问题列表，我想将其封装在不同的Component中。因此，我遍历问题列表并创建问号。

现在的问题是，如何根据创建该标记的问题对象为每个标记填充Question component？这是可能的，还是应该将问题模板与Category合并？

Answer 1

使用input property将问题对象传递到Question组件中。让我们命名输入属性qObj：

<question *ngFor="let questionObj of questions" [qObj]="questionObj"></question>

在Question组件中，声明输入属性：

import {Component, Input} from '@angular/core';
@Component({ 
   selector: 'question',
   template: `<div>{{qObj.question}}`  // I'm assuming it has a question property
})
export class Question {
   @Input() qObj:Object;
}

Answer 2

我不确定我是否完全理解您的问题，但如果您的类别包含问题列表，您应该使用ngFor或我建议在类别中重复

<html>
  <form>
    <category ng-repeat="question in $ctrl.questions">
      <question/>
    <category>
    <navigate/>
  </form>
</html>

$ ctrl应该引用你的类别的控制器然后，您可以在此标记内使用问题变量

Answer 3

你的问题有点模糊。在我看来，你的类别组件需要从ngOnInit钩子的服务器列表中获取。

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

在Angular 2中从ngFor生成子组件

3 个答案: