Angular 4 ngModel не работает с флажком внутри множественного цикла for - PullRequest
Новая
       18

Angular 4 ngModel не работает с флажком внутри множественного цикла for

0 голосов
/ 26 сентября 2018

Я относительно новичок в Angular, я не могу выяснить, где у меня что-то не так?

Внутри моего файла component.html нижеследующий раздел работает абсолютно нормально .Он проверяет только соответствующие флажки. 

<div *ngFor="let category of categories;let i=index">
 <div class="col-xs-2 catStyle">
   <input type="checkbox" [(ngModel)]="catIdList[i]" value="{{category._id}}" >  
          {{category.name}}
  </div>
</div>

Здесь массив категорий, содержащий все категории, которые я получаю от сервера.и массив catIdList, содержащий список ранее выбранных категорий, которые я хочу предварительно проверить во время загрузки страницы.

Но

Это не работает для кода ниже.Он проверяет все флажки. 

 <div *ngFor="let category of mapCat">
     <div *ngFor="let sc of category.subcat;let j=index">
         <div class="col-xs-2 subcatStyle">
            <input type="checkbox" [(ngModel)]="subcatIdList[j]" value="{{sc._id}}" >  
     {{sc.name}}<hr style="margin: 4px 11px;"><p style="font-weight: 400;font-size: 12px;margin-bottom: 0px;" >{{category.parentCatName}}</p>
          </div>
        </div>
     </div>

Структура mapCat:

[{parentCatName: "XXXX", подкат: [{_id: "5b17ef169a194e0ee8cfc276", parentRef: "5b17ecfe9a194e0ee8cfc275 ", имя:" YYY "}]}]

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018 
 <div *ngFor="let category of mapCat">
 <div *ngFor="let sc of category.subcat;let j=index">
     <div class="col-xs-2 subcatStyle">
        <input type="checkbox" (click)="onCheck(sc.id,$event)" value="{{sc._id}}" >  
 {{sc.name}}<hr style="margin: 4px 11px;"><p style="font-weight: 400;font-size: 12px;margin-bottom: 0px;" >{{category.parentCatName}}</p>
      </div>
    </div>
 </div>

Используйте это в html

Не используйте ngModel внутри флажка 

onCheck(service: any, event) {
  console.log(service, event, "Selected");
  if (event.target.checked) {
    this.usecheckboxDatahere.push(service);     
  } else if (!event.target.checked) {
    let index = this."usecheckboxDatahere".indexOf(service);
    this.usecheckboxDatahere.splice(index, 1);
  }
  console.log(this.usecheckboxDatahere);     
}
0 голосов
/ 26 сентября 2018

Убедитесь, что вы импортировали FormModule в '/app.module.ts' import { FormsModule } from '@angular/forms';@NgModule({imports: [FormsModule]})

Bcoz, ngModel находится внутри модуля Form

...