2017-11-28 17 views
0

왜 내 사격 이벤트가 발생하지 않습니까 ???Angular4 : 데이터 바인딩에 의해 트리거 될 때 입력 이벤트 변경 이벤트가 발생하지 않습니다.

배열이 범주에 있습니다. 모든 카테고리에는 id, name, clean_name 및 checked (부울) 필드가 있습니다. 모든 카테고리가 체크 박스가있는 트리보기에 표시됩니다. 체크 박스는 다음과 같이 찾고 있습니다 : 체크 박스 값이 변경 될 때 기능 onCheckboxClick()를 실행 도중에

<input class="categoryBox" type="checkbox" name="category" 
     [value]="item['value']" 
     [id]="item['clean_category_name'] + '_' + item['id'] + '_' + componentName" 
     [checked]="item.checked" 
     (change)="onCheckboxClick(item)"> 

그래서, 그것은 (변경) 이벤트가 발생한다.

체크 박스를 클릭하면 (변경) 이벤트가 발생하고 모든 것이 정상적으로 작동합니다. 그러나 코드에서 배열의 확인 된 값을 변경하면 [checked] = "item.checked"특성 바인딩으로 인해 확인란을 선택하더라도 해고되지 않습니다. 왜 그게? 프로그래밍 방식으로 발사 (변경) 할 수 있습니까? 해결책이 있습니까?

는 또한 (ngModelChange)를 시도하지만 ... 작업 중 하나를하지 않았다

속성 바인딩을 통해 속성과 상호 작용할 때 당신은 [attr.xxx] 구문을 사용할 필요가

답변

0

. 실제로 요소의 checked 속성을 변경하지 않습니다. 나는 당신이 당신의 콘솔에 오류를 일으키지 않는다고 놀랍다. 따라서 귀하의 경우에는 다음과 같습니다

<input class="categoryBox" type="checkbox" name="category" [attr.value]="item['value']" [attr.id]="item['clean_category_name'] + '_' + item['id'] + '_' + componentName" [attr.checked]="item.checked" (change)="onCheckboxClick(item)">

+0

안녕하세요! 답장을 보내 주셔서 감사합니다. 하지만 [attr.id]의 [attr.checked]를 사용하면 더 이상 작동하지 않습니다. id는 코드에 나타나지 않습니다. –

+0

구성 요소 코드를 게시 할 수 있습니까? 보기를 움직이는 논리에 대한 액세스 없이는 말하기가 정말 어렵습니다. – joshrathke

0

HTML :

<input type="checkbox" (change)="Check(id,$event)" name="id" value="{{id}}"> 

component.ts :

Check(value, event) 
    { if (event.target.checked) 
    { this.checked.push(value); } 

    else if (!event.target.checked) 
    { let indexx = this.checked.indexOf(value); 
     this.checked.splice(indexx, 1);} 
    } 

내 프로젝트에서이 일을했다.

Check() 함수는 내가 원하는 사용자의 ID 인 checkbox 값을 가져온 다음 배열로 밀어 넣고 그 배열을 사용하여 조작을 수행합니다.

+0

안녕하세요, 답장을 보내 주셔서 감사합니다. 하지만 내 문제는 (chech) 이벤트가 심지어는 해고되지 않기 때문에 Check 함수가 실행되지 않는다는 것입니다. –

0

이것이 문제의 해결책인지는 모르지만 각도 4는 내가 원하는 것을 할 수 있다고 생각하지 않습니다. 그래서 내가 한 일은 checkbox 입력에 dispatchEvent 함수를 실행하는 것입니다!