属性 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 元素。它将相同的 id 添加到复选框和标签的 for。但是当你有多个具有相同 id 的元素时，label 指的是其中的第一个。在你的情况下，它指的是你的组件而不是 input.

只需重命名输入参数即可。

顺便说一句，在ts中声明相应的字段是正确的class。

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;
  }
})

属性 Angular 2 的绑定不会更新具有绑定 ID 的关联输入

Binding for attribute Angular 2 doesn't update associated input with bound id

javascript

angular2-forms

angular2-components

angular