web-dev-qa-db-ja.com

プロパティのバインディングと属性の補間

プロパティと属性のバインディングの違いに関する記事を読みました。私が理解したことから、ほとんどの場合、Angular2はプロパティバインディングを好みます。これは、データが変更されるたびにDOMが更新されるためです。 （私が間違っている場合、私を修正してください）。

カスタムコンポーネントがあり、親コンポーネントから使用します。その中に、@Inputという名前のtruevalue。プロパティバインディングを介して親からtruevalueを開始しても、変更されないことがあります。私は次のコードを使用しました：

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

trueまたは"1" into trueValueそれは動作しますが、私が"Y"または"YES"、 それは動作しません。そのため、属性バインディングを使用せざるを得ません。何が問題なのかわかりません。

次のように変更しました。

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

前もって感謝します

angularbindingpropertiesattributesinterpolation
23
Maryam Gharibi

のようなプロパティバインディング

[trueValue]="..."

式"..."を評価し、値を割り当てます

"true"は、値true"Y"は不明です。 TypeScriptには内部Y値がなく、テンプレートクラスのスコープであるコンポーネントクラスインスタンスにはプロパティがありません。この場合、あなたは望むでしょう

[trueValue]="'Y'"

Yを文字列にするための追加の引用符に注意してください。

プレーン属性も入力に割り当てられます

trueValue="Y"

angular2バインディングのないプレーンHTMLであり、属性値は常に文字列です。したがって、これは文字列Yを割り当てます。

別の方法は文字列補間です

trueValue="{{true}}"

"true"を含む式が評価され、入力に渡される前に文字列に変換されるため、値{{...}}（文字列として）が割り当てられます。これを使用して、文字列以外の値をバインドすることはできません。

プロパティの代わりに属性に明示的にバインドするには、使用できます（属性を作成しますが、評価は行わないtrueValue="Y"を除く）

[attr.trueValue]="'Y'"

または

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

属性バインディングは、trueValue属性を使用してCSSセレクターで要素をアドレス指定する場合に役立ちます。

33
Günter Zöchbauer

次の文章から理解するようになりました

最初にhtml属性およびdomプロパティについて少し説明します

  1. 属性はhtmlによって定義され、プロパティはDOMによって定義されます
  2. 属性はDOMプロパティを初期化します。初期化が完了すると、属性ジョブが完了します
  3. プロパティ値は変更できますが、属性値は変更できません

例えば

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

ブラウザのコンソールで入力すると

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

idInput.value  // property value also gives xyz

テキストボックスの入力テキストをtyzに変更した場合：

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

idInput.value  // property value also gives tyz

角度の異なる種類のバインディング

文字列補間{{name}}

  1. 補間は、Angularプロパティバインディングに変換する特別な構文です
  2. 文字列を連結するには、プロパティバインディングの代わりに補間を使用する必要があります
  3. 要素のプロパティを文字列以外のデータ値に設定するには、プロパティのバインドが必要です

Property Binding [disabled] = "name"
ここで[disabled]はDOMのプロパティです。 htmlにある属性disabledではありません。

属性バインディングattr.colspan ="{{colspanval}}"
たとえば、属性に対応するプロパティが存在しない場合、colspanには対応するdomプロパティがないため、属性のバインドが必要です。
エラーは、colspan = "{{cospanval}}"を使用しようとするとコンソールにスローされます-プロパティのバインド

20
Nayas Subramanian

文字列としてのデータ値をレンダリングする場合、一方のフォームをもう一方のフォームよりも優先する技術的な理由はありません。

ブール値または文字列以外のデータ値が必要な場合は、プロパティバインディングを使用する必要があります

6
ganesh kalje

プロパティbinding（[]）およびInterpolation（{{}}）は、どちらも類似しており、どちらも一方向のデータバインディング（コンポーネントからhtmlテンプレートへのデータの供給）をサポートしています。それらの間にはわずかな違いがあります。文字列以外のデータにはプロパティバインディングを使用する必要があります。

<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).
2
Sheo Dayal Singh

他にも数人がこれについて言及していますが、違いを強調するには良い例が重要だと思います。次のようにバインドされたラジオボタンがあるとします。

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

これは正しく動作するように見えますが、item.idは文字列ではなく数値です。selectedItemIdは整数ではなく文字列値に設定されます。これにより、予期しない場所に欠陥が生じる可能性があります。たとえば、item.id == selectedItemIdは、item.id === selectedItemIdは常にfalseです。

したがって、valueプロパティでプロパティバインディングを常に使用することをお勧めします。これは、valuesではなく、 HTMLを変更するだけです。

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

boolean attributes についても同様です。 checkedやdisabledのような場合には、Angularは補間値をブール値として扱うように見えますが、hiddenのような他の場合には、 this stackblitz を参照してください。

2
StriplingWarrior

_my-checkbox_がカスタムコンポーネントセレクタであり、親コンポーネントでこれを使用していると仮定します。カスタムコンポーネントの_@Input_プロパティとしてtrueValueがあるため、親コンポーネントで使用するにはYがvalueとして評価される必要があります1の（trueと同等）。

プロパティバインディングが機能するには、値に評価される必要があります。 「YES」または「Y」は単なる文字列値であり、次のようなことをしない限り評価されません。

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

_{{trueValue}}_のようなカスタムコンポーネントでtrueValueを使用してinterpolationを表示します

もう1つ注意すべき点は、_{{}}_を使用する場合、つまり補間を行う場合、バインドする前に常に値を.toString()に変換することです。

2
candidJ

技術的には、プロパティをバインドする3つの方法があります。

  1. 文字列補間-{{expression}}-コンポーネントのテンプレートからバインドされた値をレンダリングし、この式を文字列に変換します。

  2. プロパティバインディング-[target] = "expression"-コンポーネントからテンプレートに値をレンダリングすることで同じことを行いますが、文字列以外の式（たとえば-ブール値）をバインドする場合は、プロパティBindingが最適なオプションです。

  3. bind-target = "expression"-これは通常の使用方法ではありません。

常に、ユースケースに合ったオプションを使用するかどうかを決定します。

2
Siddhartha Thota