Como adicionar atributo condicional no Angular 2?

Como posso adicionar condicionalmente um atributo de elemento, por exemplo, o checked caixa de seleção?

Versões anteriores do Angular tinham NgAttre acho NgCheckedque todas parecem fornecer a funcionalidade que eu estou procurando. No entanto, esses atributos não parecem existir no Angular 2 e não vejo outra maneira de fornecer essa funcionalidade.

null remove:

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

ou

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

Dica:

Atributo vs propriedade

Quando o elemento HTML ao qual você adiciona essa ligação não possui uma propriedade com o nome usado na ligação ( checkednesse caso) e também nenhum componente ou diretiva Angular é aplicada ao mesmo elemento que possui uma @Input() checked;,[xxx]="..." não pode ser usada.

Veja também Qual é a diferença entre propriedades e atributos em HTML?

A que vincular quando não existe essa propriedade

As alternativas são [style.xxx]="...", [attr.xxx]="...",[class.xxx]="..." dependendo do que você tentar realizar.

Porque <input>só tem um checkedatributo, mas nenhuma checkedpropriedade[attr.checked]="..." é o caminho certo para este caso específico.

Os atributos podem lidar apenas com valores de sequência

Uma armadilha comum também é que, para as [attr.xxx]="..."ligações, o valor ( ...) é sempre rigoroso. Somente propriedades e@Input() es podem receber outros tipos de valores como booleano, número, objeto, ...

A maioria propriedades e atributos dos elementos estão conectados e têm o mesmo nome.

Conexão de atributo de propriedade

Quando ligada ao atributo, a propriedade também recebe apenas o valor stringified do atributo.
Quando ligada à propriedade, a propriedade recebe o valor associado a ela (booleano, número, objeto, ...) e o atributo novamente o valor estrito.

Dois casos em que os nomes de atributos e propriedades não coincidem.

• Erro ao adicionar o atributo "for" ao rótulo no modelo angular 2.0

• https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLLabelElement/htmlFor (consulte a primeira frase da descrição htmlFor property reflects the value of the for- forprovavelmente não funcionou porque é uma palavra-chave em C ou JavaScript)

• Por que colspan não é um atributo nativo conhecido no Angular 2?

Angular foi alterado desde então e conhece esses casos especiais e os manipula para que você possa vincular-se a ele <label [for]="mesmo que não exista essa propriedade (o mesmo para colspan)

na sintaxe do atributo angular-2 é

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

Vincula a função de atributo ao resultado da expressão myAriaRole.

então pode usar como

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

Refinando a resposta de Günter Zöchbauer:

Isso parece ser diferente agora. Eu estava tentando fazer isso para aplicar condicionalmente um atributo href a uma marca de âncora. Você deve usar indefinido para o caso 'não se aplica'. Como exemplo, demonstrarei com um link condicionalmente a aplicação de um atributo href.

Uma marca de âncora sem um atributo href se torna texto sem formatação, indicando um espaço reservado para um link, de acordo com a especificação do hiperlink .

Para minha navegação, tenho uma lista de links, mas um desses links representa a página atual. Eu não queria que o link da página atual fosse um link, mas ainda quero que ele apareça na lista (ele tem alguns estilos personalizados, mas este exemplo é simplificado).

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

Isso é mais limpo do que usar dois * ngIf em uma tag span e anchor, eu acho.

Se for um elemento de entrada, você pode escrever algo como .... <input type="radio" [checked]="condition">O valor da condição deve ser verdadeiro ou falso.

Também para atributos de estilo ... <h4 [style.color]="'red'">Some text</h4>

Você pode usar isso.

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

Você pode usar uma abordagem melhor para alguém escrever HTML para um scss já existente.
html

[attr.role]="<boolean>"

scss

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

Dessa forma, você não precisa <boolean> ? true : nullsempre.

Aqui, o parágrafo é impresso apenas 'isValid' é verdadeiro / contém qualquer valor

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

Eu queria ter uma dica de ferramenta apenas para um campo específico, conforme adicionado abaixo no código, mas você deseja ter uma dica de ferramenta no multiplente, pode ter um array valdidate usando:

Vários elementos com atributo de dica de ferramenta de dados personalizado :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Inclui (chave)

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

ter atributo de dica de ferramenta em mais de 1 elemento.

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

Mapas em linha também são úteis.

Eles são um pouco mais explícitos e legíveis também.

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

Apenas outra maneira de realizar a mesma coisa, caso você não goste da sintaxe ternária ou ngIfs (etc).