Question

我可以使用angular

添加下拉列表

@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

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

Answer 1

无需与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

Answer 2

由于您已经使用了input元素，您可以在应用的根模块中包含“@ angular / forms”中的“FormsModule”并尝试。

Answer 3

尝试使用以下代码显示多重复选框以及如何在组件中进行多项选择

// HTML

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

// Conponent

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

复选框无法以角度4工作

3 个答案: