如何在Angular2中使用* ngFor动态生成ngModel？

Question

这两天以来一直令我感到困惑，如何在ngModel循环中为每个新迭代创建一个新的*ngFor？我的想法是，我加载一个问题列表，在每个问题中我有2个命题，这里是html

 <div *ngFor="#qt of listQuestion">

<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>

 <div class="uk-accordion-content">

<input type="checkbox"  id="0" [(ngModel)]="selected"  (Change)="cbChange($event)"/>

<label for="0" class="inline-label" > <b>{{qt.lpo[0]}}</b></label><br>

<input type="checkbox"  id="1" [(ngModel)]="selected_1" (Change)="cbChange_1($event)"/>

<label for="1" class="inline-label"><b>{{qt.lpo[1]}}</b></label><br>


                                   </div></div>

如果您在listQuestion中有一个问题，如果只有一个问题，我会检查一个proposition（例如：{ {1}}）第一个问题将选择其他问题的所有其他第一个命题（第一个，因为lpo[0]的索引） 这是一个说明问题的图片：

请帮忙吗？

Answer 1

每个ngModel都需要分配给不同的变量。在您的示例中并非如此，因为您只使用了两个变量（selected，selected_1）。面向对象的编程救援！创建新类问题和新类答案。问题应该有答案的内部数组。然后使用两个ngFors迭代问题及其答案。

export class Question {
    public text:string;
    public answers:Answer[];
}

export class Answer{
    public text:string;
    public selected:boolean;
}

<div *ngFor="let q of questions">
    {{q.text}}
    <div *ngFor="let a of q.answers">
        <label><input type="checkbox" name="checkbox" [(ngModel)]="a.selected">{{a.text}}</label>
    </div>
</div>

然后，您可以将这样的问题数组初始化：

questions:Question[] = [
    {
        text: "What do you want?",
        answers: [
            {
                "text": "Nothing",
                "selected": false
            },
            {
                "text": "Something",
                "selected": false
            }
        ]
    }
];

这样，如果你想要

，你可以得到不均匀的答案数

Answer 2

非常简单，你必须确保json包含适当的true or false字段，因为你要处理checkbox。

使用ngFor我会像这样使用ngModel，

[(ngModel)]="qt.lpo[0]"  //qt.lpo has to be true or false
// Answer1, Answer2  you can manage separately 

[(ngModel)]="qt.lpo[1]" //qt.lpo creates new instance for each iteration of ngFor loop.

这样，它会为每个问题创建不同的ngModel。但您必须确保qt.lpo字段应包含true或false。