2

这两天以来一直让我感到困惑，如何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（例如lpo[0]：），所有其他第一个命题（首先是因为其他问题的索引lpo = 0）将被选中 这是一张说明问题的图片：

在此处输入图像描述

请问有什么帮助吗？

4

2 回答 2

2

每个 ngModel 都需要分配给不同的变量。在您的示例中并非如此，因为您只使用了两个变量（selected, selected_1）。面向对象编程的救援！创建新类问题和新类答案。问题应该有答案的内部数组。然后使用两个 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
            }
        ]
    }
];

这样，如果您愿意，您可以得到奇数的答案

于 2016-06-10T12:14:21.297 回答
1

它非常简单，您必须确保 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。

于 2016-06-10T12:30:30.767 回答