在Angular 2中从ngFor生成子组件
[英]Generate child components from ngFor in Angular 2
问题描述
是否可以从Angular 2中的ngFor迭代创建独立的子组件？
我正在使用一种结构构建测验应用程序，其中一个Quiz组件具有多个Categories ，而一个类别具有多个Questions 。
Angular将根据从REST API中检索的测验生成一个表单，用户可以在其中来回导航不同类别的问题，最后保存部分或提交完整的表单。
我为应用程序模板绘制了以下伪结构：
<html>
<form>
<category>
<question *ngFor="let question of questions" />
<category>
<navigate/>
</form>
</html>
Quiz component具有类别列表和对活动类别的引用。 Category component具有输入绑定，以反映测验的活动类别。 Category具有问题列表，我希望将其封装在不同的组件中。 因此，我遍历问题列表并创建问题标签。
现在的问题是，如何根据创建该标签的问题对象为每个标签填充“ Question component ？ 这可能吗，还是应该将问题模板与“类别”合并？
3 个解决方案
解决方案1
1 已采纳 2016-05-28 23:50:35
使用input属性将问题对象传递到Question组件中。 让我们命名输入属性qObj ：
<question *ngFor="let questionObj of questions" [qObj]="questionObj"></question>
在您的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
我不确定我是否完全理解您的问题，但是如果您的类别中包含问题列表，则应使用ngFor或建议在该类别中使用ng-repeat
<html>
<form>
<category ng-repeat="question in $ctrl.questions">
<question/>
<category>
<navigate/>
</form>
</html>
其中$ ctrl应该引用您类别的控制器。
然后，您可以在此标记内使用问题变量
解决方案3
0 2016-05-28 18:36:58
您的问题有点含糊。 在我看来，您的类别组件需要使用ngOnInit挂钩从服务器问题列表中获取。
https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
Angular OnPush 更改检测传播到 ngFor 循环中的子组件
[英]Angular OnPush Change Detection Propagation to a Child Components in a ngFor Loop
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.