Bagaimana cara menambahkan atribut kondisional dalam Angular 2?

Bagaimana saya bisa menambahkan atribut elemen dengan syarat misalnya checkedkotak centang?

Versi Angular sebelumnya NgAttrdan saya pikir NgCheckedyang semuanya sepertinya menyediakan fungsionalitas yang saya cari. Namun, atribut ini tampaknya tidak ada di Angular 2 dan saya tidak melihat cara lain untuk menyediakan fungsi ini.

null menghapusnya:

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

atau

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

Petunjuk:

Atribut vs properti

Ketika elemen HTML tempat Anda menambahkan pengikatan ini tidak memiliki properti dengan nama yang digunakan dalam pengikatan ( checkeddalam hal ini) dan juga tidak ada komponen atau arahan Angular yang diterapkan ke elemen yang sama yang memiliki @Input() checked;, maka [xxx]="..."tidak dapat digunakan.

Lihat juga Apa perbedaan antara properti dan atribut dalam HTML?

Apa yang harus mengikat ketika tidak ada properti seperti itu

Alternatif yang [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."tergantung pada apa yang Anda mencoba untuk mencapai.

Karena <input>hanya memiliki checkedatribut, tetapi tidak ada checkedproperti [attr.checked]="..."adalah cara yang tepat untuk kasus khusus ini.

Atribut hanya dapat menangani nilai string

Jebakan yang umum adalah juga bahwa untuk [attr.xxx]="..."binding nilai ( ...) selalu berstruktur. Hanya properti dan @Input()s yang dapat menerima tipe nilai lain seperti boolean, angka, objek, ...

Sebagian besar properti dan atribut elemen terhubung dan memiliki nama yang sama.

Koneksi atribut-properti

Ketika terikat ke atribut, properti juga hanya menerima nilai yang diikat dari atribut.
Ketika diikat ke properti, properti menerima nilai yang terikat padanya (boolean, angka, objek, ...) dan atributnya lagi nilai yang dirangkai.

Dua kasus di mana nama atribut dan properti tidak cocok.

• Galat saat menambahkan atribut "untuk" ke label pada template sudut 2.0

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (lihat kalimat pertama dari deskripsi htmlFor property reflects the value of the for- formungkin tidak berfungsi karena kata kunci dalam C atau JavaScript)

• Mengapa colspan bukan atribut asli yang dikenal di Angular 2?

Sudut telah diubah sejak saat itu dan tahu tentang kasus khusus ini dan menanganinya sehingga Anda dapat mengikat <label [for]="meskipun tidak ada properti seperti itu (sama untuk colspan)

dalam sintaks atribut angular-2 adalah

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

Mengikat peran atribut ke hasil ekspresi myAriaRole.

jadi bisa pakai like

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

Menyempurnakan jawaban Günter Zöchbauer:

Tampaknya ini berbeda sekarang. Saya mencoba melakukan ini untuk menerapkan atribut href secara kondisional ke tag anchor. Anda harus menggunakan undefined untuk kasus 'tidak berlaku'. Sebagai contoh, saya akan menunjukkan dengan tautan yang menerapkan atribut href secara kondisional.

Tag anchor tanpa atribut href menjadi teks biasa, yang menunjukkan placeholder untuk suatu tautan, per spesifikasi hyperlink .

Untuk navigasi saya, saya memiliki daftar tautan, tetapi salah satu tautan itu mewakili halaman saat ini. Saya tidak ingin tautan halaman saat ini menjadi tautan, tetapi masih ingin tautan itu muncul dalam daftar (memiliki beberapa gaya khusus, tetapi contoh ini disederhanakan).

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

Ini lebih bersih daripada menggunakan dua * ngIf pada rentang dan tag jangkar, saya pikir.

Jika itu adalah elemen input, Anda dapat menulis sesuatu seperti .... <input type="radio" [checked]="condition">Nilai kondisi harus benar atau salah.

Juga untuk atribut gaya ... <h4 [style.color]="'red'">Some text</h4>

Anda bisa menggunakan ini.

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

Anda dapat menggunakan pendekatan yang lebih baik untuk seseorang yang menulis HTML untuk scss yang sudah ada.
html

[attr.role]="<boolean>"

scss

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

Dengan begitu Anda tidak perlu melakukannya <boolean> ? true : nullsetiap saat.

Di sini, paragraf dicetak hanya 'isValid' benar / mengandung nilai apa pun

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

Saya ingin memiliki tooltip saja untuk bidang tertentu seperti yang ditambahkan di bawah ini dalam kode tetapi Anda ingin memiliki tooltip di multiplent Anda dapat memiliki array valdidate menggunakan:

Beberapa Elemen memiliki tooltip data kustom atribut :

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Termasuk (kunci)

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

untuk memiliki atribut tooltip pada lebih dari 1 elemen.

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

Inline-Maps juga berguna.

Mereka sedikit lebih eksplisit & mudah dibaca juga.

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

Hanya cara lain untuk mencapai hal yang sama, jika Anda tidak menyukai sintaksis ternary atau ngIfs (dll).