在Angular 2中从ngFor生成子组件-Java 学习之路

是否可以从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 ？这可能，或者我应该将问题模板与类别合并？

3 回答

使用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;
}

回复于 2024-04-26T01:33:30+08:00

0
我不确定我是否完全理解你的问题，但如果你的类别有问题列表，你应该让你的ngFor或我建议在类别中重复
```
<html>
  <form>
    <category ng-repeat="question in $ctrl.questions">
      <question/>
    <category>
    <navigate/>
  </form>
</html>
```
$ ctrl应该引用你的类别的控制器 .
然后，您可以在此标记内使用问题变量
回复于 2024-04-26T01:33:30+08:00
0

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

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

回复于 2024-04-26T01:33:30+08:00

在Angular 2中从ngFor生成子组件

3 回答

相关问题