Question

我对Angular比较陌生，我无法找出问题出在哪里？

在我的component.html文件中，下面的部分工作正常很好。它只检查适用的复选框。

new:\s*(yes)

这是类别数组，其中包含我从服务器获取的所有类别。和catIdList数组，其中包含我希望在加载页面时预先检查的先前选择的类别的列表。

但是

以下代码不起作用。它正在检查所有复选框。

<div *ngFor="let category of categories;let i=index">
 <div class="col-xs-2 catStyle">
   <input type="checkbox" [(ngModel)]="catIdList[i]" value="{{category._id}}" >  
          {{category.name}}
  </div>
</div>

mapCat的结构是

[{parentCatName：“ XXXX”，子类别：[{_ id：   “ 5b17ef169a194e0ee8cfc276”，parentRef：“ 5b17ecfe9a194e0ee8cfc275”，   名称：“ YYY”}]}]

Answer 1

确保已在'/app.module.ts'中导入FormModule import { FormsModule } from '@angular/forms';@NgModule({imports: [FormsModule]})

Bcoz，ngModel驻留在Form模块内部

Answer 2

 <div *ngFor="let category of mapCat">
 <div *ngFor="let sc of category.subcat;let j=index">
     <div class="col-xs-2 subcatStyle">
        <input type="checkbox" (click)="onCheck(sc.id,$event)" value="{{sc._id}}" >  
 {{sc.name}}<hr style="margin: 4px 11px;"><p style="font-weight: 400;font-size: 12px;margin-bottom: 0px;" >{{category.parentCatName}}</p>
      </div>
    </div>
 </div>

在您的html中使用它

不要在复选框内使用ngModel

onCheck(service: any, event) {
  console.log(service, event, "Selected");
  if (event.target.checked) {
    this.usecheckboxDatahere.push(service);     
  } else if (!event.target.checked) {
    let index = this."usecheckboxDatahere".indexOf(service);
    this.usecheckboxDatahere.splice(index, 1);
  }
  console.log(this.usecheckboxDatahere);     
}

Angular 4 ngModel不适用于多个for循环中的复选框

2 个答案: