ngFor에서 부울 배열로 작성된 각도 2 바인딩 확인란

Question

저는 ngFor를 사용하여 동적으로 드롭 다운 목록을 만들고 서비스 내에 저장된 문자열 배열 (SQL 쿼리에서 가져옴)을 반복합니다.

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)"> 
    <a> 
    <input type="checkbox" id="vehCB_{{i}}"/>{{vehicleClasses}} 
    </a> 
</li> 

드롭 다운 메뉴 체크 박스 다음 사용자가 서비스보다는 구성 요소) 내에서 바람직하게 확인 (그리고있다 확인란 ({{VehicleClasses}}. 가 어떻게 저장 않는 선택의 이름이? 이상적으로
, 나는 체크 박스 값을 저장하는 부울 배열을 원한다면 가능하다면, 예를 들어 함수가 모든 체크 박스 불린을 변경하는 경우 체크 박스를 값에 바인딩하면 확인란이 업데이트됩니까?

다른 유사한 시나리오에 사용 된 ngModel을 보았습니다. 그러나 성공적으로 수행 할 수 없었습니다. 작동 시키십시오.

Answer 1

질문을 게시 한 후 답변을 게시하는 것에 대해 사과드립니다. 선호한다면 질문을 삭제할 수 있습니다. 그러나 다른 누군가가 유사한 문제에 부딪 힐 경우를 대비하여.

ngModel을 사용하여 서비스 내에서 부울 배열에 직접 바인딩 할 수 있다는 것을 알지 못했습니다. ngFor의 인덱스 표기법을 사용하여, 나는 쉽게 부울 배열 내의 요소에 각각의 체크 박스를 결합 수 :

<li *ngFor="let vehicleClasses of getVehicleClassList(); let i = index" (click)="toggleCheckBox(i)"> 
    <a> 
    <input type="checkbox" id="vehCB_{{i}}" [(ngModel)]="toolbarService.vehicleClassCheckboxes[i]"/>{{vehicleClasses}} 
    </a> 
</li> 

내가 직접 부울 배열을 수정 서비스 내에서 쓴 기능은 체크 박스가 제대로 업데이트하는 원인이되었다. 다른 사람이 이것을하는 더 좋은 방법이 있다면, 나는 알고 싶습니다. - 이것이 우연히 내 시나리오에 잘 맞았음에도 불구하고.

Answer 2

처음에는 매우 자주 바인딩

*ngFor="let vehicleClasses of getVehicleClassList(); 

변경 감지 실행 등의 방법을 호출 할 때마다의 방법을 사용 방지하고 탐지를 변경 실행됩니다하려고합니다. 결과를 속성에 대신 할당하고 해당 속성에 바인딩하십시오.

<li *ngFor="let vehicleClass of getVehicleClasses; let i = index" (click)="cbStatus[i] = !cbStatus[i]"> 
    <a> 
    <input type="checkbox" [(ngModel)]="cbStatus[i]" />{{vehicleClass}} 
    </a> 
</li> 

class MyComponent { 
    @Input() set vehicleClasses(value) { 
    this.vehicles = value; 
    this.cbStatus = []; 
    for(var p in this.vehicles) { 
     this.vehicles.push(false); 
    } 
    } 
}