Wie füge ich ein bedingtes Attribut in Angular 2 hinzu?

Wie kann ich bedingt ein Elementattribut hinzufügen, z. B. das checkedeines Kontrollkästchens?

Frühere Versionen von Angular hatten NgAttrund ich denke NgChecked, alle scheinen die Funktionalität zu bieten, nach der ich suche. Diese Attribute scheinen jedoch in Angular 2 nicht vorhanden zu sein, und ich sehe keine andere Möglichkeit, diese Funktionalität bereitzustellen.

null entfernt es:

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

oder

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

Hinweis:

Attribut gegen Eigenschaft

Wenn das HTML-Element, in das Sie diese Bindung einfügen, keine Eigenschaft mit dem in der Bindung verwendeten Namen hat ( checkedin diesem Fall) und auch keine Winkelkomponente oder -anweisung auf dasselbe Element angewendet wird, das eine hat @Input() checked;, [xxx]="..."kann es nicht verwendet werden.

Siehe auch Was ist der Unterschied zwischen Eigenschaften und Attributen in HTML?

Woran zu binden ist, wenn es keine solche Eigenschaft gibt

Alternativen sind [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."je nachdem , was Sie versuchen zu erreichen.

Denn <input>nur ein checkedAttribut, aber keine checkedEigenschaft [attr.checked]="..."ist der richtige Weg für diesen speziellen Fall.

Attribute können nur Zeichenfolgenwerte verarbeiten

Eine häufige Gefahr besteht auch darin, dass für [attr.xxx]="..."Bindungen der Wert ( ...) immer stringifiziert ist. Nur Eigenschaften und @Input()s können andere Werttypen wie Boolesche Werte, Zahlen, Objekte, ... empfangen.

Die meisten Eigenschaften und Attribute von Elementen sind miteinander verbunden und haben denselben Namen.

Eigenschaftsattributverbindung

Wenn die Eigenschaft an das Attribut gebunden ist, erhält sie auch nur den String-Wert vom Attribut.
Wenn die Eigenschaft an die Eigenschaft gebunden ist, erhält sie den daran gebundenen Wert (Boolescher Wert, Zahl, Objekt, ...) und das Attribut erneut den Zeichenwert.

Zwei Fälle, in denen Attribut- und Eigenschaftsnamen nicht übereinstimmen.

• Fehler beim Hinzufügen des Attributs "for" zur Beschriftung in der eckigen 2.0-Vorlage

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (siehe den ersten Satz der Beschreibung htmlFor property reflects the value of the for- hat forwahrscheinlich nicht funktioniert, weil es ein Schlüsselwort in C oder JavaScript ist)

• Warum ist Colspan in Angular 2 kein bekanntes natives Attribut?

Angular wurde seitdem geändert und kennt diese Sonderfälle und behandelt sie so, dass Sie sie binden können, <label [for]="obwohl keine solche Eigenschaft vorhanden ist (dasselbe gilt für colspan).

in Winkel-2 Attribut Syntax ist

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

Bindet dem Ergebnis des Ausdrucks myAriaRole eine Attributrolle.

so kann man gerne benutzen

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

Verfeinerung Günter Zöchbauer Antwort:

Dies scheint jetzt anders zu sein. Ich habe versucht, dies zu tun, um ein href-Attribut bedingt auf ein Ankertag anzuwenden. Sie müssen undefined für den Fall "Nicht anwenden" verwenden. Als Beispiel werde ich anhand eines Links demonstrieren, bei dem ein href-Attribut bedingt angewendet wird.

Ein Ankertag ohne href-Attribut wird zu einfachem Text, der einen Platzhalter für einen Link gemäß der Hyperlink-Spezifikation angibt .

Für meine Navigation habe ich eine Liste von Links, aber einer dieser Links repräsentiert die aktuelle Seite. Ich wollte nicht, dass der aktuelle Seitenlink ein Link ist, möchte aber dennoch, dass er in der Liste angezeigt wird (er hat einige benutzerdefinierte Stile, aber dieses Beispiel ist vereinfacht).

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

Dies ist sauberer als die Verwendung von zwei * ngIf auf einem Span- und Anker-Tag, denke ich.

Wenn es sich um ein Eingabeelement handelt, können Sie so etwas wie ... schreiben. <input type="radio" [checked]="condition">Der Wert der Bedingung muss wahr oder falsch sein.

Auch für Stilattribute ... <h4 [style.color]="'red'">Some text</h4>

Sie können dies verwenden.

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

Sie können einen besseren Ansatz für jemanden verwenden, der HTML für ein bereits vorhandenes scss schreibt.
html

[attr.role]="<boolean>"

scss

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

Auf diese Weise müssen Sie nicht <boolean> ? true : nulljedes Mal.

Hier wird der Absatz nur gedruckt. 'IsValid' ist true / enthält einen beliebigen Wert

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

Ich wollte einen Tooltip nur für ein bestimmtes Feld haben, wie unten im Code hinzugefügt, aber Sie möchten einen Tooltip für Multiplikatoren haben. Sie können ein Array-Valdidat verwenden, indem Sie:

Mehrere Elemente mit benutzerdefiniertem Daten-Tooltip- Attribut:

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']. Includes (key)

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

Tooltip-Attribut für mehr als 1 Element haben.

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

Auch Inline-Maps sind praktisch.

Sie sind auch etwas expliziter und lesbarer.

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

Nur eine andere Möglichkeit, dasselbe zu erreichen, falls Ihnen die ternäre Syntax oder ngIfs (usw.) nicht gefällt .