각도 2 개 선택 조회하는 체크 박스

Question

나는이 체크 박스 (고객이 많은 부속품이 다를 수 있습니다)이 있습니다

customer.component.html :

<div class="checkbox" *ngFor="let accessory of accessories"> 
<label> 
    <input type="checkbox" [(ngModel)]="accessory.selected" (ngModelChange)="onCheckboxChange(accessory)"> {{ accessory.name }} 
</label> 
</div> 

customer.component.ts :

onCheckboxChange(accessory: any) { 
    if (accessory.selected == true) { 
     this.selectedAccessories.push(accessory); 
    } else { 
     let i = this.selectedAccessories.indexOf(accessory); 
     if (i != -1) { 
      this.selectedAccessories.splice(i, 1); 
     } 
    } 
} 

을

선택한 확인란을 하나의 배열에 저장할 수있는 방법이 있습니다. 예를 들면

customer: Customer; 
accessories: any[]; 
selectedAccessories: any[]; 

ngOnInit() { 
this.accessoryService.get().subscribe(
    accessories => this.accessories = accessories 
) 
if (this.routeParams.get('id')) { 
    let id = this.routeParams.get('id'); 
    this.getCustomer(id); 
} 
} 

getCustomer(id: number) { 
    this.customerService.getCustomer(id).subscribe(
    data => { 
    this.selectedAccessories = data.customer.accessories 
    this.customer = data.customer 
    } 
) 
} 

개체가 데이터베이스에 저장되어 있는지 확인하면 정상적으로 작동합니다. 그러나 선택한 액세서리를 확인란에 다시 채울 수있는 방법을 모르겠습니다. 배열을 indexOf() 및 map()과 비교하려고 시도했지만 성공하지 못했습니다.

Obs : Object 액세서리에는 ID와 이름의 두 가지 속성 만 있습니다.

어떤 도움 당신은 [(ngModel)]="accessory.selected"와 객체 accessory의 selected 속성에 체크 박스를 바인딩

Answer 1

을 감상 할 수있다. 즉, 확인란을 선택하거나 선택 취소 할 때마다 accessory.selected 값이 업데이트됩니다. 또한 다른 방법으로 작동합니다 : accessory.selected 값이 설정되면 확인란이 업데이트됩니다. 모든 액세서리 이름과 선택된 값을 가지고

private accessories = [ 
    {name: 'A', selected: false}, 
    {name: 'B', selected: true} 
    ]; 

참고 : Plunker - checkboxes

우리가 먼저 액세서리 객체의 배열을 만들 다음과 같은 Plunker에 보여 그 생각을 볼 수 있습니다. 부속 장치 B의 값은 true으로 설정됩니다. 페이지를 처음로드 할 때 결과를 볼 수 있습니다. 액세서리의 체크 박스는 A (selected: false로 인해)의 체크가 해제 된 반면 액세서리 B의 체크 박스는 체크되어 있습니다 (selected: true 때문에). 확인란을 선택/선택 취소하면 콘솔에 인쇄 된 selected 속성의 결과를 볼 수 있습니다.

이것은 코드에서 accessories 배열의 개체에 대한 selected 속성을 적절한 값으로 설정해야한다는 것을 의미합니다.

너는 이제 조금 더 나아갈 수있다. 너는 선택된 액세서리의 배열을 추적하기 위해서 onCheckboxChange 이벤트를 듣고있다. 이 부분을 모두 남겨두고 모든 액세서리를 반복하고 해당 액세서리를 꺼내어 selected: true 세트를 요청하면 해당 배열을 구성 할 수 있습니다.