属性角度2のための結合は、バインドされたID

Question

に関連する入力を更新していない私はそうのようなバインディングと私の構成要素内のチェックボックスがあります。

<input type="checkbox" [name]="name" [id]="id" /><label [htmlFor]="id"></label> 

私は要素を検査していることの値を見つけることができるコンポーネントの負荷をそれらの入力に渡されたラベルはバインドされていますが、ラベルをクリックするとチェックボックスがチェックされません。

私もそうのようにそれを試してみた：その

<input type="checkbox" [attr.name]="name" [attr.id]="id" /><label [attr.for]="id"></label> 
<input type="checkbox" name="{{name}}" id="{{id}} /><label [attr.for]="id"></label> 

およびそれらの組み合わせ。それらはすべて同じエフェクトを生成し、データはバインドされ、チェックボックスはチェックされません。ここで

は私のコンポーネントです：

import { Component } from '@angular/core'; 

@Component({ 
    inputs: ['name', 'id'], 
    selector: 'my-checkbox', 
    templateUrl: 'app/form/input/checkbox.component.html' 
}) 

export class CheckboxComponent {} 

そして、それが使われているHTML：

<my-checkbox name="test-name" id="test-id"></my-checkbox> 

Answer 1

あなたが入力された名前としてidを使用している、あなたは、このidを持つDOM要素として、あなたのコンポーネントを取得します。チェックボックスに同じIDを付け、ラベルのforを追加します。しかし、同じidを持つ複数の要素がある場合、labelはそれらの最初のものを参照します。あなたの場合は、inputの代わりにコンポーネントを参照します。

入力パラメータの名前を変更します。

ちなみに、tsクラスの対応するフィールドを宣言するのは間違いありません。

http://plnkr.co/edit/JazXV3Oi91hSBTdVlBHh?p=preview

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <my-checkbox-broken id="test-id-1"></my-checkbox-broken><br> 
     <my-checkbox-broken [id]="'test-id-2'"></my-checkbox-broken> can work too<br> 
     <my-checkbox-working chkId="test-id-3"></my-checkbox-working><br> 
     <output></output> 
    ` 
}) 
export class AppComponent { 
} 

@Component({ 
    inputs: ['id'], 
    selector: 'my-checkbox-broken', 
    template: '<input type="checkbox" [id]="id" /><label [htmlFor]="id">Broken :(</label>' 
}) 
export class CheckboxComponent_Broken { 
    id: string; 
} 

@Component({ 
    inputs: ['chkId'], 
    selector: 'my-checkbox-working', 
    template: '<input type="checkbox" [id]="chkId" /><label [htmlFor]="chkId">Working!</label>' 
}) 
export class CheckboxComponent_Working { 
    chkId: string; 
} 

document.addEventListener('click', ({ target: { htmlFor: id } }) => { 
    if (id) { 
    document.querySelector('output').textContent = id + " is " + document.getElementById(id).tagName; 
    } 
}) 

Answer 2

は、これらのいずれかを試してみてください。

<my-checkbox [name]="'test-name'" [id]="'test-id'"></my-checkbox> 
<my-checkbox name="test-name" [id]="'test-id'"></my-checkbox> 

あなたは文字列として値を渡す必要があり、 [property]="experession"、および文字列に評価する式の場合は、引用符で囲む必要があります'test-name'。

plunker

Answer 3

次の仕事をしていますか？

<input type="checkbox" name="{{name}}" id="{{id}} /><label for="{{id}}"></label>