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

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

---

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

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

---

null 그것을 제거합니다 :

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

또는

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

---

각도 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>

---

인라인 맵도 편리합니다.

그들은 조금 더 명확하고 읽기 쉽습니다.

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

삼항 구문이나 ngIfs 등 을 좋아하지 않는 경우 동일한 일을 달성하는 또 다른 방법 .

참고 URL : https://stackoverflow.com/questions/36745734/how-to-add-conditional-attribute-in-angular-2