Jak dodać atrybut warunkowy w Angular 2?

Jak mogę warunkowo dodać atrybut elementu, np. checkedPola wyboru?

Poprzednie wersje Angulara miały NgAttri myślę, NgCheckedktóre wydają się zapewniać funkcjonalność, której szukam. Jednak te atrybuty nie wydają się istnieć w Angular 2 i nie widzę innego sposobu zapewnienia tej funkcjonalności.

null usuwa to:

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

lub

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

Wskazówka:

Atrybut a własność

Jeśli element HTML, do którego dodajesz to powiązanie, nie ma właściwości o nazwie użytej w powiązaniu ( checkedw tym przypadku), a do tego samego elementu, który ma @Input() checked;, [xxx]="..."nie zostanie zastosowany żaden komponent ani dyrektywa Angular , wówczas nie można go użyć.

Zobacz także Jaka jest różnica między właściwościami a atrybutami w HTML?

Z czym się wiązać, gdy nie ma takiej właściwości

Alternatywami są [style.xxx]="...", [attr.xxx]="..."w [class.xxx]="..."zależności od tego, co próbujesz osiągnąć.

Ponieważ <input>ma tylko checkedatrybut, ale żadna checkedwłaściwość nie [attr.checked]="..."jest właściwym sposobem dla tego konkretnego przypadku.

Atrybuty mogą obsługiwać tylko wartości ciągu

Częstą pułapką jest również to, że w przypadku [attr.xxx]="..."powiązań wartość ( ...) jest zawsze rygorystyczna. Tylko właściwości @Input()s mogą odbierać inne typy wartości, takie jak wartość logiczna, liczba, obiekt, ...

Większość właściwości i atrybutów elementów jest połączonych i ma tę samą nazwę.

Połączenie właściwość-atrybut

Po powiązaniu z atrybutem właściwość otrzymuje również tylko wartość łańcuchową z atrybutu.
Po powiązaniu z właściwością właściwość otrzymuje związaną z nią wartość (wartość logiczna, liczba, obiekt, ...), a atrybut ponownie wartość łańcuchową.

Dwa przypadki, w których nazwy atrybutów i właściwości nie są zgodne.

• Błąd podczas dodawania atrybutu „for” do etykiety w szablonie kątowym 2.0

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (patrz pierwsze zdanie opisu htmlFor property reflects the value of the for- forprawdopodobnie nie działało, ponieważ jest to słowo kluczowe w C lub JavaScript)

• Dlaczego colspan nie jest znanym rodzimym atrybutem w Angular 2?

Od tego czasu zmieniono Angular i wie o tych specjalnych przypadkach i obsługuje je, aby można było powiązać, <label [for]="nawet jeśli nie istnieje taka właściwość (to samo dla colspan)

w składni atrybutu kątowego-2 jest

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

Wiąże atrybut roli do wyniku wyrażenia myAriaRole.

więc można użyć jak

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

Uściślenie odpowiedzi Güntera Zöchbauera:

Teraz wydaje się, że jest inaczej. Próbowałem to zrobić, aby warunkowo zastosować atrybut href do tagu zakotwiczenia. W przypadku „nie stosuj” musisz użyć niezdefiniowanego. Jako przykład pokażę z linkiem warunkowo z zastosowanym atrybutem href.

Tag kotwicy bez atrybutu href staje się zwykłym tekstem, wskazującym symbol zastępczy dla łącza, zgodnie ze specyfikacją hiperłącza .

Do mojej nawigacji mam listę linków, ale jeden z nich reprezentuje bieżącą stronę. Nie chciałem, aby bieżący link do strony był linkiem, ale nadal chcę, aby pojawiał się na liście (ma kilka niestandardowych stylów, ale ten przykład jest uproszczony).

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

Wydaje mi się, że jest to czystsze niż używanie dwóch * ngIf na znaczniku zakresu i zakotwiczenia.

Jeśli jest to element wejściowy, możesz napisać coś takiego: .... <input type="radio" [checked]="condition">Wartość warunku musi być true lub false.

Również dla atrybutów stylu ... <h4 [style.color]="'red'">Some text</h4>

możesz tego użyć.

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

Możesz zastosować lepsze podejście dla kogoś, kto pisze HTML dla już istniejącego scss.
HTML

[attr.role]="<boolean>"

scss

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

W ten sposób nie musisz za <boolean> ? true : nullkażdym razem.

Tutaj akapit jest drukowany tylko „isValid” jest prawdą / zawiera dowolną wartość

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

Chciałem mieć podpowiedź tylko dla określonego pola dodaną poniżej w kodzie, ale jeśli chcesz mieć podpowiedź na mnożniku, możesz mieć tablicę walidacyjną za pomocą:

Wiele elementów posiadających niestandardowy atrybut data-tooltip :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Zawiera (klucz)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']. IndexOf (klucz)> -1

mieć atrybut podpowiedzi na więcej niż 1 elemencie.

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

Przydatne są również mapy wbudowane.

Są również nieco bardziej wyraźne i czytelne.

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

Po prostu inny sposób na osiągnięcie tego samego, na wypadek, gdyby nie podobała Ci się składnia trójskładnikowa ngIf(s) itp.