在Angular 2中从ngFor生成子组件
[英]Generate child components from ngFor in Angular 2
问题描述
Is it possible to create independent child Components from ngFor iteration in Angular 2? 
是否可以从Angular 2中的ngFor迭代创建独立的子组件？
I'm making a Quiz application with a structure, where one Quiz component have multiple Categories , and one Category have multiple Questions . 我正在使用一种结构构建测验应用程序，其中一个Quiz组件具有多个Categories ，而一个类别具有多个Questions 。
Angular will generate a form from Quiz retrieved from REST api, where user can navigate back and forth between different categories of questions and finally save partial or submit complete form. Angular将根据从REST API中检索的测验生成一个表单，用户可以在其中来回导航不同类别的问题，最后保存部分或提交完整的表单。
I sketched the following pseudo-structure for application template: 我为应用程序模板绘制了以下伪结构：
<html>
<form>
<category>
<question *ngFor="let question of questions" />
<category>
<navigate/>
</form>
</html>
Quiz component has a list of categories and a reference to an active category. Quiz component具有类别列表和对活动类别的引用。 Category component has input binding to reflect the active category of Quiz. Category component具有输入绑定，以反映测验的活动类别。 Category has list of Questions, which I want to encapsulate in distinct Component. Category具有问题列表，我希望将其封装在不同的组件中。 Thus I iterate through the list of questions and create question tag. 因此，我遍历问题列表并创建问题标签。
Now the problem is, how I populate the Question component for each tag according the question object creating that tag? 现在的问题是，如何根据创建该标签的问题对象为每个标签填充“ Question component ？ Is this possible, or should I merge the question template with Category? 这可能吗，还是应该将问题模板与“类别”合并？
3 个解决方案
解决方案1
1 已采纳 2016-05-28 23:50:35
Pass the question object into the Question component using an input property . 使用input属性将问题对象传递到Question组件中。 Let's name that input property qObj : 让我们命名输入属性qObj ：
<question *ngFor="let questionObj of questions" [qObj]="questionObj"></question>
In your Question component, declare the input property: 在您的Question组件中，声明input属性：
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
0 2016-05-28 15:03:35
I'm not sure if I completely understand your question but if your category has the list of questions you should make your ngFor or I suggest ng-repeat in the category 我不确定我是否完全理解您的问题，但是如果您的类别中包含问题列表，则应使用ngFor或建议在该类别中使用ng-repeat
<html>
<form>
<category ng-repeat="question in $ctrl.questions">
<question/>
<category>
<navigate/>
</form>
</html>
Where $ctrl should refer to the controller of your category. 其中$ ctrl应该引用您类别的控制器。
You can then use the question variable inside this tag 然后，您可以在此标记内使用问题变量
解决方案3
0 2016-05-28 18:36:58
Your question is a bit vague. 您的问题有点含糊。 it seems to me that your category component needs to get from the server list of questions with the ngOnInit hook. 在我看来，您的类别组件需要使用ngOnInit挂钩从服务器问题列表中获取。
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.