Jak dodać atrybut warunkowy w Angular 2?


276

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.




2
googlersi, jeśli chcesz mieć bezwartościowy atrybut komponentu kątowego, zobacz tutaj
Frank Nocke 10.04.19

Odpowiedzi:


574

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.

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)


3
Możesz pominąć „attr”. prefiks.
Filip Stachowiak,

16
@FilipStachowiak, to nie stanie się atrybutem. Istnieją różne właściwości wielu elementów, w których sam element odzwierciedla wartość powiązaną z właściwością do atrybutu (a także w innym kierunku). W takim przypadku nie potrzebujesz attr.. Ale jeśli chcesz dodać niestandardowy atrybut, zdecydowanie potrzebujesz attr.prefiksu
Günter Zöchbauer

14
Żeby było jasne, to trzeba się attr.część tego. Próbowałem ustawić [href]i chciałem, aby była ustawiona tylko wtedy, gdy hrefistniała właściwość elementu . Bez [attr.href]tego dodałby href o wartości „null”, który po kliknięciu odświeżyłby bieżącą stronę. [attr.href]naprawione.
dudewad

@udewad, co nie wydaje mi się właściwe. Jeśli ustawisz hrefelement, który ma hrefwłaściwość, nie musisz go używać attr. Musi być coś jeszcze nie tak.
Günter Zöchbauer

@ günter-zöchbauer No cóż, używam Ng 4.x, a <a [href]="item.href">gdzie item.hrefjest niezdefiniowana (nie wartość niezdefiniowana, ale właściwość hrefnie istnieje item) ustawia hrefatrybut na null. Nie zagłębiłem się w źródło, bo szczerze mówiąc, nie dbam o to w tym momencie (to drobny szczegół), ale attr.jest to zupełnie inna dyrektywa i dlatego działa inaczej, nie jest dla mnie zaskoczeniem.
dudewad

37

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"

9
Problem polega na tym, że kiedy your expressionjest falseatrybut w DOM będzie wyglądać <div checked="false">. Nie sądzę, że jest to zamierzony efekt.
Günter Zöchbauer

7
Dzięki, ale zapytałem, jak warunkowo dodać atrybut, a nie warunkowo przypisać jego wartość.
Jonathan Miles,

Możesz nawet pominąć „attr”. prefiks.
Filip Stachowiak

1
@FilipStachowiak, to nie stanie się atrybutem. Istnieją różne właściwości wielu elementów, w których sam element odzwierciedla wartość powiązaną z właściwością do atrybutu (a także w innym kierunku). W takim przypadku nie potrzebujesz attr.. Ale jeśli chcesz dodać niestandardowy atrybut, zdecydowanie potrzebujesz attr.prefiksu
Günter Zöchbauer

o rany, to: zero jest niesamowite, rzecz wiedziała, że ​​można tego użyć warunkowo! dzięki za rozwiązanie.
pinarella

17

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.


5

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>


4

możesz tego użyć.

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


Sprawdziłeś wartość atrybutu za pomocą „val”. jeśli to prawda, to po prostu prawda zwraca, w przeciwnym razie zwraca wartość fałszywą
WapShivam

1

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.


To nie działa w każdym przypadku. Na przykład nie działa z multipleatrybutem na selectelemencie.
smartmouse

0

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

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

0

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>

-7

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.


1
Klasa jest czymś zupełnie innym niż atrybut (o co chodzi w pytaniu)
Günter Zöchbauer

1
Możesz również podjąć wysiłek, aby udzielić właściwej odpowiedzi na pytanie, wtedy miałem powód do ponownego rozpatrzenia mojego głosowania, a także mogłem oddać głos bez dodawania komentarza, który nie pozwoliłby ci zrozumieć, o co chodziło w głosowaniu.
Günter Zöchbauer

1
@Cody czy możesz wyjaśnić (podać przykładowy kod), jak twoja metoda będzie działać z checkedatrybutem (dodaj / usuń go ze znacznika wejściowego) w <input type="checkbox" name="vehicle" value="Car" checked>? (jeśli zmienimy classna checkboxw twoim kodzie, to NIE działa (sprawdzam to))
Kamil Kiełczewski,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.