Come aggiungere l'attributo condizionale in Angular 2?

Come posso aggiungere condizionalmente un attributo element, ad es. Di checkeduna casella di controllo?

Le versioni precedenti di Angular avevano NgAttre penso NgCheckedche tutte sembrano fornire la funzionalità che sto cercando. Tuttavia, questi attributi non sembrano esistere in Angular 2 e non vedo altro modo di fornire questa funzionalità.

null lo rimuove:

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

o

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

Suggerimento:

Attributo vs proprietà

Quando l'elemento HTML in cui si aggiunge questa associazione non ha una proprietà con il nome utilizzato nell'associazione ( checkedin questo caso) e anche nessun componente angolare o direttiva viene applicato allo stesso elemento che ha un @Input() checked;, quindi [xxx]="..."non può essere utilizzato.

Vedi anche Qual è la differenza tra proprietà e attributi in HTML?

Cosa legare quando non esiste tale proprietà

Le alternative sono [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."a seconda di ciò che si tenta di realizzare.

Perché <input>ha solo un checkedattributo, ma nessuna checkedproprietà [attr.checked]="..."è la strada giusta per questo caso specifico.

Gli attributi possono gestire solo valori di stringa

Una trappola comune è anche che per i [attr.xxx]="..."bind il valore ( ...) è sempre rigoroso. Solo le proprietà @Input()possono ricevere altri tipi di valore come booleano, numero, oggetto, ...

La maggior parte delle proprietà e degli attributi degli elementi sono collegati e hanno lo stesso nome.

Connessione proprietà-attributo

Se associata all'attributo, la proprietà riceve anche solo il valore specificato dall'attributo.
Se associata alla proprietà, la proprietà riceve il valore associato ad essa (booleano, numero, oggetto, ...) e l'attributo di nuovo il valore stringa.

Due casi in cui i nomi degli attributi e delle proprietà non corrispondono.

• Errore durante l'aggiunta dell'attributo "for" all'etichetta nel modello angolare 2.0

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlPer (vedi la prima frase della descrizione htmlFor property reflects the value of the for- forprobabilmente non ha funzionato perché è una parola chiave in C o JavaScript)

• Perché colspan non è un attributo nativo noto in Angular 2?

Da allora l'angolo è stato modificato e conosce questi casi speciali e li gestisce in modo da poterli associare <label [for]="anche se non esiste tale proprietà (lo stesso per colspan)

nella sintassi dell'attributo angolare-2 è

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

Associa il ruolo dell'attributo al risultato dell'espressione myAriaRole.

così può usare come

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

Raffinazione Günter Zöchbauer risposta:

Questo sembra essere diverso ora. Stavo cercando di fare questo per applicare condizionalmente un attributo href a un tag anchor. È necessario utilizzare undefined per il caso 'non applicare'. Ad esempio, dimostrerò in modo condizionale un link a cui è applicato un attributo href.

Un tag anchor senza un attributo href diventa testo semplice, indicando un segnaposto per un collegamento, secondo la specifica del collegamento ipertestuale .

Per la mia navigazione, ho un elenco di collegamenti, ma uno di questi collegamenti rappresenta la pagina corrente. Non volevo che il link della pagina corrente fosse un link, ma volevo comunque che comparisse nell'elenco (ha alcuni stili personalizzati, ma questo esempio è semplificato).

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

Questo è più pulito dell'uso di due * ngIf su uno span e tag di ancoraggio, credo.

Se è un elemento di input, puoi scrivere qualcosa del tipo ... <input type="radio" [checked]="condition">Il valore della condizione deve essere vero o falso.

Anche per gli attributi di stile ... <h4 [style.color]="'red'">Some text</h4>

puoi usare questo.

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

Puoi usare un approccio migliore per qualcuno che scrive HTML per uno scss già esistente.
html

[attr.role]="<boolean>"

SCSS

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

In questo modo non è necessario <boolean> ? true : nullogni volta.

Qui, il paragrafo viene stampato solo 'isValid' è true / contiene qualsiasi valore

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

Volevo avere tooltip solo per un determinato campo come aggiunto di seguito nel codice ma vuoi avere tooltip su multiplent puoi avere un array valdidate usando:

Più elementi con attributo personalizzato data-tooltip :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Include (chiave)

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

avere l'attributo tooltip su più di 1 elemento.

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

Anche le mappe in linea sono utili.

Sono anche un po 'più espliciti e leggibili.

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

Solo un altro modo di realizzare la stessa cosa, nel caso in cui non ti piaccia la sintassi ternaria o ngIfs (ecc.).