web-dev-qa-db-fra.com

Liaison de propriété vs interpolation d'attribut

J'ai lu un article sur la différence entre les liaisons de propriété et d'attribut. D'après ce que j'ai compris, la plupart du temps, Angular2 préfère les liaisons de propriétés, car, après chaque modification des données, le DOM était mis à jour. (Si je me trompe, corrigez-moi s'il vous plaît).

J'ai un composant personnalisé et je l'utilise depuis le composant parent. Dans celui-ci, j'ai un @Input nommé truevalue. lorsque j'initie truevalue à partir du parent via la liaison de propriété, parfois, cela ne change pas. J'ai utilisé le code suivant:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>

Si j'envoie true ou "1" dans trueValue cela fonctionne, mais si j'envoie "Y" ou "YES", cela ne fonctionne pas. Je suis donc obligé d'utiliser la liaison d'attribut. Je ne sais pas quel est le problème.

Je l'ai changé, en ce qui suit:

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox>

Merci d'avance

angularbindingpropertiesattributesinterpolation
16
Maryam Gharibi

Liaison de propriété comme

[trueValue]="..."

évalue l'expression "..." et affecte la valeur

"true" est évalué à la valeur true"Y" est inconnu. Il n'y a pas de valeur Y interne dans TypeScript ni de propriété dans l'occurrence de classe de composant, qui correspond à la portée de la liaison de modèle . Dans ce cas, vous souhaitez

[trueValue]="'Y'"

Notez les guillemets supplémentaires pour faire de Y une chaîne.

Les attributs simples sont également attribués aux entrées 

trueValue="Y"

est un fichier HTML simple sans aucune liaison Angular2 et les valeurs d'attribut sont toujours des chaînes. Par conséquent, cela affecterait la chaîne Y.

Une autre façon est l'interpolation de chaîne

trueValue="{{true}}"

assignerait la valeur "true" (sous forme de chaîne) car l'expression avec {{...}} serait évaluée puis convertie en chaîne avant d'être transmise à l'entrée. Cela ne peut pas être utilisé pour lier d'autres valeurs que des chaînes.

Pour lier explicitement à un attribut au lieu d'une propriété, vous pouvez utiliser (À part trueValue="Y" qui crée un attribut mais ne fait aucune évaluation)

[attr.trueValue]="'Y'"

ou

attr.trueValue="{{'Y'}}"

La liaison d'attribut est utile si vous souhaitez utiliser l'attribut trueValue pour adresser l'élément avec des sélecteurs CSS.

28
Günter Zöchbauer

Je suis venu à comprendre des phrases suivantes

Je vais d’abord expliquer un peu le sujet de attribut html et propriété dom

  1. Les attributs sont définis par HTML alors que les propriétés sont définies par DOM
  2. Les attributs initialisent les propriétés DOM. Une fois l'initialisation terminée, l'attribut est terminé.
  3. La valeur des propriétés peut changer alors que la valeur de l'attribut ne peut pas changer

Par exemple

 <input id="idInput" type="text" value="xyz" />

En console d'un navigateur si on tape

idInput.getAttribute('value') //attribute value gives xyz

idInput.value  // property value also gives xyz

Si nous modifions le texte d'entrée dans la zone de texte en tyz:

idInput.getAttribute('value') // attribute value gives xyz

idInput.value  // property value also gives tyz

Maintenant différents types de reliure angulaire

Interpolation de chaîne {{name}}

  1. L'interpolation est une syntaxe spéciale convertie par Angular en une propriété
  2. Pour concaténer des chaînes, nous devons utiliser une interpolation au lieu d'une liaison de propriété.
  3. Pour définir une propriété d’élément sur une valeur de données autre que de chaîne, vous devez associer une propriété.

Property Binding [disabled] = "name"
Ici, [disabled] est une propriété de DOM. Pas l'attribut disabled trouvé en html.

Liaison d'attribut attr.colspan ="{{colspanval}}"
Lorsque la propriété correspondant à l'attribut n'existe pas, par exemple, colspan n'a pas de propriété dom correspondante, ce qui oblige la liaison d'attribut.
Erreur est renvoyé dans la console si nous essayons d'utiliser colspan = "{{cospanval}}" - property binding

14
Nayas Subramanian

Lors du rendu de valeurs de données sous forme de chaînes , il n'y a aucune raison technique de préférer un formulaire à un autre. 

Si nous voulons les valeurs de données sous forme booléenne ou autre que chaîne alors nous devrions aller à la liaison de propriété

3
ganesh kalje

Techniquement, il existe 3 façons de lier des propriétés. 

  1. Interpolation de chaîne - {{expression}} - restitue la valeur liée à partir du modèle du composant et convertit cette expression en chaîne.

  2. Property Binding - [target] = "expression" - fait la même chose en rendant la valeur d'un composant à un autre, mais si vous souhaitez lier une expression autre que chaîne (par exemple, boolean), alors la propriété Binding est la meilleure option .

  3. bind-target = "expression" - Ce n'est pas une façon habituelle d'utiliser. 

C'est toujours votre décision d'utiliser l'option qui correspond à votre cas d'utilisation.

3
Siddhartha Thota

En supposant que my-checkbox est votre sélecteur de composant personnalisé et que vous l’utilisez dans votre composant parent .. Comme vous avez la propriété trueValue comme @Input sur votre composant personnalisé, vous devez l’utiliser dans le composant parent Y. évaluer à certains value ce qu'il fait dans le cas de 1 (équivalent à true).

Pour que la liaison de propriété fonctionne, elle doit être évaluée à une valeur. "OUI" ou "Y" ne sont que des valeurs de chaîne qui ne seront pas évaluées à moins que vous ne fassiez quelque chose comme:

export class ParentComponent` {
       Y = "YES"; // <--or "Y"
    }

puis affichez trueValue en utilisant interpolation dans votre composant personnalisé tel que {{trueValue}} 

une autre chose à noter est que lorsque vous utilisez {{}} i.e interpolation, il convertit toujours la valeur en .toString() avant la liaison.

2
candidJ

La liaison de propriété ([]) et l'interpolation ({{}}) sont similaires et toutes deux prennent en charge la liaison de données à sens unique (fournit les données du composant au modèle HTML). Nous devons utiliser la liaison de propriété pour les données non-chaîne. 

<div [disabled]='isdissabled'>Text</div>

 here is property that is defined inside component.

 isdissabled : boolean=true;(after that change it to false in both scenario it would work as expected)
<div disabled='{{isdissabled}}'>Text</div>

but this scenario would not work as expected(both scenario it would be dissabled).
1
Sheo Dayal Singh

Quelques autres ont mentionné cela, mais je pense qu'un bon exemple est important pour souligner la différence. Supposons que vous ayez des boutons radio liés comme ceci:

<div *ngFor="let item of results">
  <input type="radio" value="{{item.id}}" name="{{item.id}}" [(ngModel)]="selectedItemId">
</div>

Cela semblerait fonctionner correctement, mais si item.id est une valeur numérique plutôt qu'une chaîne, selectedItemId serait défini sur une valeur de chaîne au lieu d'un entier. Cela pourrait causer des défauts dans des endroits inattendus. Par exemple, utiliser item.id == selectedItemId peut renvoyer true, alors que item.id === selectedItemId est toujours faux.

Donc, je suggérerais que c'est probablement une bonne pratique de toujours utiliser la liaison de propriété sur la propriété value, car elle est spécifiquement utilisée pour stocker et lier à values ​​ plutôt que de simplement changer le code HTML. 

<div *ngFor="let item of results">
  <input type="radio" [value]="item.id" name="{{item.id}}" [(ngModel)]="selectedItemId">
</div>

Il en va de même pour attributs booléens . Notez que dans certains cas, comme checked et disabled, Angular semble traiter les valeurs interpolées comme des booléens, mais dans d'autres cas, comme hidden, ce n'est pas le cas. Voir this stackblitz } pour un exemple.

0
StriplingWarrior