Question

我有一个复选框列表，我需要通过项目json数组渲染出来并预先勾选它们“item.isInPackage”等于true：

<tr *ngFor="let item of items"><td><input id="item.id" type="checkbox" [checked]="item.isInPackage"></td></tr>

在提交表单时，如何为勾选的复选框ID生成类似于下面的json对象数组：

[
  {
    "fixtureId": 1
  },
{
    "fixtureId": 2
  }
]

我对复选框是否还需要应用[（ngModel）]感到困惑？

Answer 1

您可以使用[(ngModel)]，但您不必这样做。我使用(click)并将其绑定到构建JSON的函数。以下是我的所作所为： Plunker

@Component({
  selector: 'my-app',
  template: `
    <input *ngFor="let item of items" id="item?.fixture.id" type="checkbox" (click)="setObj(item)" [checked]="item.isInPackage" #item?.fixture.id>
  {{obj}}`,
  styles: []
})
export class FormComponent implements OnInit {

  items : any[] = [{fixtureId:1,isInPackage:false},{fixtureId:2,isInPackage: false}]
  obj : string = "[]";

  constructor(){

  }

  setObj(item){
    let obj = JSON.parse(this.obj);
    item.isInPackage = !item.isInPackage;
    if(!item.isInPackage){
      obj.forEach((e,i) => {
        e.fixtureId === item.fixtureId ? obj.splice(i,1) : null;
      })
    } else {
      obj.push({fixtureId:item.fixtureId});
    }
    this.obj = JSON.stringify(obj);
  }

}

Angular 2列出了需要预先设定的复选框，并在表单提交中获取这些值

1 个答案: