중첩 된 ngFor로 반복되는 체크 상자 입력

중첩 된 객체를 반복하려고하고 있으며 값이 true 또는 false 인 확인란이 있습니다.중첩 된 ngFor로 반복되는 체크 상자 입력

<accordion-group 
    *ngFor='let brand of products'> 
    <div *ngFor='let product of brand.products'> 
     <div> 
      <input type="checkbox" id="{{product.name}}" ngControl="{{product}}" ([ngModel])="product.checked"> 
      <label 
       attr.for="{{product.name}}" 
       id="{{product.description}}" 
       class="{{product.description}}" 
       (click)="onCheck(model)"> 
      </label> 
      </div> 
     </p> 
     </div> 
    </accordion-group>

Plunker :

여기 내 코드의 http://plnkr.co/edit/IItxHiXkpocUjLG6NhMy?p=preview - 수량 값이 업데이트 될 때 체크 박스가 확인하지 않는 것을 알 수있다. ngModel을 올바르게 작동시킬 수 없습니다.

출처

2016-08-29 Brooke Clonts

확인란에 이름 속성을 지정하십시오. 그들이 같은 그룹에 소속된다면 그들은 같은 이름을 가져야합니다. 또한이 코드로 피들을 추가하면 문제를 더 잘 이해하고 코드 실행 및 실패를 확인할 수 있으므로이 질문을 더 명확하게 할 수 있습니다. – gdyrrahitis

하지 "바나나의 상자", "상자에 바나나"라고
```
[(ngModel)] 
```
해야한다 ngControl은 angular2에 따라 fromControlName이어야합니다.
([ngModel])은 [(ngModel)]이어야하며 [ngModel] 및 (ngModel)과 같이 다른 것으로 사용해야합니다. dynamicaly

사용 [id]="product?.name" 대신 귀하의 경우 사용 상태로 ID, 이름 등을 결합하면서

더 나은 property Binding using [ ]를 사용하는 id="{{product.name}}"

사용 [attr.for]="product?.name" 대신 attr.for="{{product.name}}"

의 여전히 나머지는 괜찮아요, 모든게 잘된 것 같습니다. 동일한 문제로 plunker에 문제를 재현하고 게시하십시오.

출처

2016-08-30 05:49:11

편집 된 질문에 연결된 플 런커를 참조하십시오. 수량이 업데이트되었지만 작동하지 않는지 확인하려면 확인란이 필요합니다. ngModel은 귀하가 옳았다는 의미로 바인딩하지 않습니다. –

. 나는 일하기를 좋아했다. 이제는 내 앱에서 작동하지 않는 이유를 알아야합니다. 감사! –

이

([ngModel])

무효가되어, 그것은 ;-)

출처

2016-08-30 04:51:01

하하 무슨 슬로건인가 : p BANANA & BOX –

하지만 도움이 될 것입니다. D –

예 : 의심의 여지가 없습니다 : p –

[(ngModel)] = "product.checked";

각도 2로 100 % 작동

출처

2018-01-17 09:59:18 sriram

중첩 된 ngFor로 반복되는 체크 상자 입력

답변

관련 문제