属性 Angular 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

尝试以下方法之一：

<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 2

以下是否有效？

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

Answer 3

当您使用id 作为输入名称时，您将组件作为具有此ID 的dom-element。它将相同的 id 添加到复选框和标签的for。但是当您有多个具有相同 id 的元素时，标签指的是其中的第一个。在您的情况下，它指的是您的组件而不是 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;
  }
})