在 Angular 2 中从 ngFor 生成子组件答案

【问题标题】：Generate child components from ngFor in Angular 2在 Angular 2 中从 ngFor 生成子组件
【发布时间】：2016-09-26 18:06:49
【问题描述】：

是否可以在 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 有问题列表，我想将其封装在不同的组件中。因此，我遍历问题列表并创建问题标签。

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

【问题讨论】：

您能帮我解决我发布的问题吗？stackoverflow.com/questions/54016062/… 我们的问题看起来很相似。我猜你会遇到类似的问题。

标签： javascript html angularjs model-view-controller angular

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我不确定我是否完全理解您的问题，但如果您的类别有问题列表，您应该使用 ngFor 或者我建议在类别中使用 ng-repeat

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

$ctrl 应该指向您的类别的控制器。
然后，您可以在此标签内使用 question 变量

【讨论】：

问题是关于 Angular 2。