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

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 만 부울, 숫자, 객체 등과 같은 다른 값 유형을 수신 할 수 있습니다.

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

속성 속성 연결

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

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

• 각도 2.0 템플릿에서 레이블에 "for"속성을 추가하는 동안 오류가 발생했습니다

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (설명의 첫 문장 참조 htmlFor property reflects the value of the for- for아마도 C 또는 JavaScript의 키워드이기 때문에 작동하지 않았을 것입니다)

• Angular 2에서 colspan이 알려진 기본 속성이 아닌 이유는 무엇입니까?

이후 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>

아래 코드에서 추가 된 특정 필드에 대해서만 툴팁을 원했지만 다중에 툴팁을 원하면 다음을 사용하여 배열 valdidate를 가질 수 있습니다.

사용자 정의 데이터 툴팁 속성이있는 여러 요소 :

1 : [ 'key1ToHaveTooltip',`key2ToHaveTooltip ']. includes (key)

2 : [ 'key1ToHaveTooltip', 'key2ToHaveTooltip']. indexOf (key)> -1

둘 이상의 요소에 툴팁 속성이 있어야합니다.

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

인라인 맵도 편리합니다.

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

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

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