Question

我正在使用RC7。我想预先填写一些复选框，但找不到适合我的答案。

基本上我有这个

  ngOnInit() {
    this.price = [true, true, false];
  }

并尝试使用ngModel和checked打开3个复选框中的2个

<label *ngFor="let val of prices; let i = index" class="radio-inline">
  {{val.name}}
  <input type="checkbox" [(ngModel)]="price[i]" [checked]="price[i]" name="price">
</label>

但是在引导结束时没有选中任何复选框。如果我点击它们，则组件中的this.price中会显示正确的值。

更新：同样

<input type="checkbox" [(ngModel)]="price[i]" [value]="price[i]" name="price">

不起作用。

答案通过使用ngModel，但是将boolean值存储在iterable中，我得到了结合以下两个答案的最佳结果。

<label *ngFor="let val of prices" class="radio-inline">
  {{val.name}}
  <input type="checkbox" [(ngModel)]="val.state" name="price" />
</label>

Answer 1

而不是

self.timer = ...

将初始值分配给

var timer = ...

然后[checked]="price[i]"将更新复选框的状态

Answer 2

尝试以下，

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
  <label *ngFor="let val of prices; let i = index" class="radio-inline">
  {{val.name}}
  <input type="checkbox" [checked]="val" name="price">
</label>
  `
})
export class AppComponent {
  prices=[];
   ngOnInit() {
    this.prices = [true, true, false];
  }
}

以下是Plunker!!

希望这会有所帮助!!

Angular2中的预勾选复选框

2 个答案: