angular - 학습 - 앵귤러 데이터 바인딩




속성 바인딩 대 속성 보간 (3)

같은 속성 바인딩

[trueValue]="..."

표현 "..." 평가하고 값을 할당합니다.

"true"true "Y" 값을 알 수 없습니다. TypeScript에는 내부 Y 값이없고 구성 요소 클래스 인스턴스에는 템플릿 바인딩 범위 인 속성이 없습니다. 이 경우에는

[trueValue]="'Y'"

Y 를 문자열로 만들려면 따옴표를 추가하십시오.

일반 속성도 입력에 할당됩니다.

trueValue="Y"

Angular2 바인딩없이 평범한 HTML이고 속성 값은 항상 문자열입니다. 따라서 문자열 Y 할당합니다.

또 다른 방법은 문자열 보간법입니다.

trueValue="{{true}}"

{{...}} 이있는 표현식이 평가 된 다음 입력으로 전달되기 전에 문자열로 변환되기 때문에 "true" (문자열) 값을 할당합니다. 문자열이 아닌 다른 값을 바인딩하는 데 사용할 수 없습니다.

명시 적으로 속성 대신 속성에 바인딩하려면 사용할 수 있습니다 ( trueValue="Y" 는 속성을 만들지 만 평가는하지 않음)

[attr.trueValue]="'Y'"

또는

attr.trueValue="{{'Y'}}"

특성 바인딩은 trueValue 특성을 사용하여 CSS 선택기로 요소를 처리하려는 경우 유용합니다.

속성과 바인딩의 차이점에 대한 기사를 읽었습니다. 대부분의 경우 내가 이해 한 것으로부터 Angular2는 속성 바인딩을 선호합니다. 데이터가 변경 될 때마다 DOM이 업데이트되기 때문입니다. (내가 틀렸다면, 나를 바로 잡으십시오.)

맞춤 구성 요소가 있고 상위 구성 요소에서 사용합니다. 여기에는 @Input 이라는 이름의 truevalue 있습니다. 속성 바인딩을 통해 부모로부터 truevalue 을 시작할 truevalue 않습니다. 다음 코드를 사용했습니다.

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>

trueValue true 또는 "1"trueValue 작동하지만 "Y" 또는 "YES" 보내면 작동하지 않습니다. 그래서 저는 속성 바인딩을 사용해야합니다. 나는 그 문제가 뭔지 모른다.

나는 그것을 다음과 같이 변경했다.

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox>

미리 감사드립니다.


my-checkbox 가 사용자 지정 구성 요소 선택기이고 가정용 구성 요소에서이 my-checkbox 한다고 가정합니다. 사용자 정의 컴포넌트에서 trueValue@Input 속성으로 사용하므로 부모 컴포넌트에서 Y 를 사용하려면 Y 가 1 인 경우 value 을 계산해야합니다 (true와 동일).

속성 바인딩이 작동하려면 값으로 평가되어야합니다. "YES"또는 "Y"는 문자열 값이며, 다음과 같은 경우를 제외하고는 평가되지 않습니다.

export class ParentComponent` {
       Y = "YES"; // <--or "Y"
    }

{{trueValue}} 와 같은 사용자 정의 구성 요소의 interpolation 을 사용하여 trueValue 를 표시합니다.

주목할 또 다른 것은 {{}} 보간법을 사용할 때 바인딩 전에 항상 값을 .toString() 변환하는 것입니다.


데이터 값을 문자열로 렌더링 할 때 하나의 형식을 다른 형식보다 선호하는 기술적 이유는 없습니다.

데이터 값을 부울 또는 문자열 이외의 다른 값으로 지정하려면 속성 바인딩을 수행해야합니다.





interpolation