Флажок не работает в угловых 4

Question

Я мог бы добавить раскрывающийся список, используя угловой

@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

Поскольку вы использовали элемент ввода, вы можете включить «FormsModule» из «@ angular / forms» в корневой модуль вашего приложения и попробовать.

Answer 2

Попробуйте использовать приведенный ниже код для отображения флажка с несколькими элементами и получения нескольких компонентов в компоненте

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

Answer 3

Нет необходимости связываться с 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>

Рабочий пример