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

复选框在角度4中不工作

  •  0
  • SmartestVEGA  · 技术社区  · 7 年前

    我可以用角度

    @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 回复  |  直到 7 年前
        1
  •  1
  •   Pardeep Jain    7 年前

    无需捆绑 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    7 年前

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

        3
  •  0
  •   Atul    7 年前

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

    //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);              
                } 
            }
        }
    }