[javascript] Angular 2에서 조건부 속성을 추가하는 방법은 무엇입니까?

JAVASCRIPT / 글쓴이

checked확인란 의 요소 속성을 조건부로 추가 하려면 어떻게해야합니까?

Angular의 이전 버전은 NgAttr내가 가지고 NgChecked있던 기능을 제공하는 것 같습니다. 그러나 이러한 특성은 Angular 2에 존재하지 않는 것으로 보이며이 기능을 제공하는 다른 방법은 없습니다.

답변

null 그것을 제거합니다 :

[attr.checked]="value ? '' : null"

또는

[attr.checked]="value ? 'checked' : null"

힌트:

속성 대 속성

이 바인딩을 추가 HTML 요소가 (바인딩에 사용되는 이름을 가진 속성이없는 경우 checked을 가지고 같은 요소에 적용되고이 경우에)없고 각도 구성 요소 또는 지시를 @Input() checked;한 후 [xxx]="..."사용할 수 없습니다.

참조 HTML의 속성과 특성의 차이점은 무엇입니까?

그러한 속성이 없을 때 바인딩 할 내용

대안은 [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."당신이 달성하려고 무엇에 따라 달라집니다.

때문에 <input>단지는이 checked속성이 있지만 checked속성 [attr.checked]="..."이 특정 사건에 대한 올바른 방법입니다.

속성은 문자열 값만 처리 할 수 ​​있습니다

일반적인 함정은 [attr.xxx]="..."바인딩을 위해 값 ( ...)이 항상 문자열 화 된다는 것입니다 . 속성과 @Input()s 만 부울, 숫자, 객체 등과 같은 다른 값 유형을 수신 할 수 있습니다.

요소의 대부분의 속성과 속성은 연결되어 있으며 이름이 같습니다.

속성 속성 연결

속성에 바인딩되면 속성은 속성에서 문자열 값만받습니다.
속성에 바인딩되면 속성에 바인딩 된 값 (부울, 숫자, 개체 등)과 문자열 값을 다시받습니다.

속성 및 속성 이름이 일치하지 않는 두 가지 경우

이후 Angular가 변경되어 이러한 특별한 경우를 알고 처리하여 <label [for]="그러한 속성이 존재하지 않아도 바인딩 할 수 있습니다 (와 동일 colspan)

답변

각도 2 속성 구문에서

<div [attr.role]="myAriaRole">

속성 역할을 myAriaRole 표현식의 결과에 바인딩합니다.

그래서처럼 사용할 수 있습니다

[attr.role]="myAriaRole ? true: null"

답변

Günter Zöchbauer 정유

이것은 지금 다른 것처럼 보입니다. 앵커 태그에 href 속성을 조건부로 적용하기 위해이 작업을 수행하려고했습니다. ‘적용 안 함’사례에 대해서는 undefined를 사용해야합니다. 예를 들어, 조건부로 href 속성이 적용된 링크로 시연하겠습니다.

href 속성이없는 앵커 태그는 일반 텍스트가되어 하이퍼 링크 spec에 따라 링크의 자리 표시자를 나타냅니다 .

내 탐색에는 링크 목록이 있지만 해당 링크 중 하나가 현재 페이지를 나타냅니다. 현재 페이지 링크를 링크로 사용하고 싶지는 않지만 여전히 목록에 표시되기를 원합니다 (일부 사용자 정의 스타일이 있지만이 예제는 단순화되었습니다).

<a [attr.href]="currentUrl !== link.url ? link.url : undefined">

span과 anchor 태그에 두 개의 * ngIf를 사용하는 것보다 깨끗합니다.

답변

입력 요소 인 경우 다음과 같이 작성할 수 있습니다 ..
<input type="radio" [checked]="condition">condition 값은 true 또는 false 여야합니다.

스타일 속성에 대해서도 …
<h4 [style.color]="'red'">Some text</h4>

답변

이것을 사용할 수 있습니다.

<span [attr.checked]="val? true : false"> </span>

답변

기존 scss의 HTML을 작성하는 사람에게 더 나은 접근 방식을 사용할 수 있습니다.

html

[attr.role]="<boolean>"

scss

[role = "true"] { ... }

그렇게하면 <boolean> ? true : null매번 필요하지 않습니다 .

답변

여기서 단락은 ‘isValid’만 인쇄되고 값이 포함됩니다.

<p *ngIf="isValid ? true : false">Paragraph</p>