代码之家 › 专栏 › 技术社区 › SmartestVEGA

复选框在角度4中不工作

angular4-forms angular jquery

0

SmartestVEGA · 技术社区 · 8 年前

我可以用角度

@Component({
  selector: 'app-child-component',
  template: `
    <select id="select" formControlName = "day"  >                                                
    <option *ngFor = "let g of dayList" [value] = "g"> {{g}} 
    </option>
    </select>                                                                                             
  `,
})

https://plnkr.co/edit/M88wFl?p=preview

但我无法添加多个复选框

代码如下:

@Component({
  selector: 'app-child-component',
  template: `
    Select days in a week :
    <td class="even" *ngFor="let item of dayList;let i = index">                                                       
    <input [(ngModel)]="item.check"  type="checkbox" checked="item.check" formControlName = "selectedDays" (change)="updateChkbxArray(n.id, $event.checked, 'selectedDays')" value="n.id" >  {{item}}                                                                                                       
  `,
})

https://plnkr.co/edit/gyAj6W?p=preview

你能帮我展示一下复选框集合吗?

3 回复 | 直到 8 年前

1

Pardeep Jain 8 年前

无需捆绑 ngModel 和 formControlName ,看看这里

<input class="input" type="search" #agmSearch>
<p class="even" *ngFor="let item of dayList;let i = index">
<input  type="checkbox" checked="item.check" (change)="updateChkbxArray(item, $event.checked, 'selectedDays')" value="n.id" >  {{item}}
</p>

Working Example

2

0

Sankar 8 年前

既然您已经使用了input元素,那么是否可以在应用程序的根模块中包含“@angular/forms”中的“forms module”并尝试。

3

0

Atul 8 年前

请尝试下面的代码以显示多个复选框以及如何在组件中获取多个选择

//html

<tr *ngFor="let address of addressList">
    <td>
        <input type="checkbox" value="{{address.id}}" name="{{address.email}}" (change) ="updateSelectedTimeslots($event)" />
    </td>
</tr>

/ /共同

countries: any[] = [];
updateSelectedTimeslots(event) {
    let this.countries: any[] = [];
    if (event.target.checked) {
        if (this.countries.indexOf((event.target.name)) < 0) { 
                this.countries.push(({'email':event.target.name}));
        }
    } else {
         for(let i = 0; i < this.countries.length; i++) {
            let country = this.countries[i];
            if(country.email.toLowerCase().indexOf(event.target.name.toLowerCase()) == 0) {
                this.countries.splice(this.countries.indexOf(({'email':event.target.name})), 1);              
            } 
        }
    }
}