Açısal 2'de koşullu özellik nasıl eklenir?

Koşullu olarak nasıl bir eleman özniteliği ekleyebilirim checked?

Angular'ın önceki sürümleri vardı NgAttrve bence NgCheckedhangisinin peşinde olduğum işlevselliği sağlıyor gibi görünüyor. Ancak, bu özniteliklerin Açısal 2'de görünmediği ve bu işlevselliği sağlamanın başka bir yolunu göremiyorum.

null kaldırır:

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

veya

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

İpucu:

Özellik ile mülk karşılaştırması

Bu bağlayıcıyı eklediğiniz HTML öğesinin, bağlayıcıda kullanılan adla ( checkedbu durumda) bir özelliği olmadığında ve aynı öğeye aynı Açısal bileşen veya yönerge uygulanmadığında @Input() checked;, [xxx]="..."kullanılamaz.

Ayrıca bkz . HTML'deki özellikler ve özellikler arasındaki fark nedir?

Böyle bir mülk olmadığında ne bağlanmalı?

Alternatifler vardır [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."sen başarmak için deneyin ne bağlı.

Çünkü <input>yalnızca bir checkedözniteliği vardır, ancak hiçbir checkedözellik [attr.checked]="..."bu özel durum için doğru yoldur.

Özellikler yalnızca dize değerlerini işleyebilir

Sık karşılaşılan bir tuzak, [attr.xxx]="..."ciltlemeler için ( ...) değerinin her zaman dizgilendirilmesidir. Yalnızca özellikler ve @Input()s, boolean, number, object, ... gibi diğer değer türlerini alabilir.

Öğelerin çoğu özelliği ve özniteliği birbirine bağlıdır ve aynı ada sahiptir.

Özellik özellik bağlantısı

Özniteliğe bağlı olduğunda, özellik yalnızca öznitelikten dize değeri alır.
Özelliğe bağlı olduğunda, özellik kendisine bağlı değeri (boolean, sayı, nesne, ...) ve öznitelik yine dize değerini alır.

Özellik ve özellik adlarının eşleşmediği iki durum.

• Açısal 2.0 şablonundaki etikete "for" özelliği eklenirken hata oluştu

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (açıklamanın ilk cümlesine bakın htmlFor property reflects the value of the for- formuhtemelen C veya JavaScript'teki bir anahtar kelime olduğu için çalışmadı)

• Colspan neden Açısal 2'de bilinen bir yerel özellik değil?

Açısal o zamandan beri değiştirildi ve bu özel durumları biliyor ve <label [for]="böyle bir özellik olmasa bile bağlanabilmeniz için bunları ele alıyor (aynı colspan)

açısal-2 öznitelik sözdiziminde

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

Özellik rolünü myAriaRole ifadesinin sonucuna bağlar.

böylece kullanabilirsiniz

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

Günter Zöchbauer rafine cevabı:

Bu şimdi farklı görünüyor. Şartlı olarak bir bağlantı etiketi için bir href özniteliği uygulamak için bunu yapmaya çalışıyordu. 'Uygulanma' davası için undefined kullanmalısınız. Örnek olarak, şartlı olarak href özniteliği uygulanmış bir bağlantıyla göstereceğim.

Href özelliği olmayan bir tutturma etiketi, köprü özelliğine göre bir bağlantı için bir yer tutucusunu gösteren düz metin haline gelir .

Gezinmem için bir bağlantılar listem var, ancak bu bağlantılardan biri geçerli sayfayı temsil ediyor. Geçerli sayfa bağlantısının bir bağlantı olmasını istemedim, ancak yine de listede görünmesini istiyorum (bazı özel stilleri var, ancak bu örnek basitleştirilmiş).

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

Bu bir yayılma ve çapa etiketi üzerinde iki * ngIf kullanmaktan daha temiz olduğunu düşünüyorum.

Bir giriş elemanı ise, şöyle bir şey yazabilirsiniz ... <input type="radio" [checked]="condition">Koşul değeri doğru veya yanlış olmalıdır.

Ayrıca stil özellikleri için ... <h4 [style.color]="'red'">Some text</h4>

bunu kullanabilirsiniz.

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

Mevcut bir scss için HTML yazan biri için daha iyi bir yaklaşım kullanabilirsiniz.
html

[attr.role]="<boolean>"

SCSS

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

Bu şekilde <boolean> ? true : nullher seferinde gerek kalmaz .

Burada paragraf sadece 'isValid' yazdırılır true / herhangi bir değer içeriyor

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

Ben ipucu olmasını istedik sadeceKod aşağıda eklenmiş olarak belirli bir alan için ama araç üzerinde çok sayıda araç ipucu kullanarak kullanarak bir dizi valdidate olabilir:

Özel veri araç ipucuna sahip birden çok Öğe özelliğine sahip :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. İçerir (anahtar)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']. İndexOf (anahtar)> -1

1'den fazla öğede ipucu özelliğine sahip olmak.

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

Inline-Maps de kullanışlıdır.

Onlar da biraz daha açık ve okunabilir.

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

Üçlü sözdizimini veya ngIfs (vb.)