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

Question

这两天以来一直让我感到困惑，如何在 *ngFor 循环中为每个新迭代创建一个新的 ngModel？这个想法是我加载一个问题列表，在每个问题中我有 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（例如：lpo[0]）的第一个问题的所有其他第一个命题（first因为lpo = 0的索引）将被选择这是一张说明问题的图片：

有什么帮助吗？

Answer 1

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

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。

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

How to generate dynamically ngModel with *ngFor in Angular2?

html

loops

angular-ngmodel

ngfor

angular