如何绑定 'maxlength' 属性？

Question

我可以渲染包含 <input> 和 maxlength 集的以下 Angular 2 组件：

@Component({
  selector: 'app',
  template: '<input maxlength="10">',
})
export class App {
}

这很好用。但是，如果我尝试通过绑定设置 maxlength，如下所示：

@Component({
  selector: 'app',
  template: '<input [maxlength]="maxLength">',
})
export class App {
    maxLength = 10;
}

或者像这样：

  template: '<input maxlength="{{maxLength}}">',

我收到以下错误：

"Template parse errors: Can't bind to 'maxlength' since it isn't a known property of 'input'."

为什么？ maxlength 是 <input> 元素的完全有效属性。

这是一个live example（打开控制台可以看到错误）。

Answer 1

摘自 Angular documentation、

属性绑定

We become painfully aware of this fact when we try to write something like this:
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr> We get this
error:
Template parse errors: Can't bind to 'colspan' since it
isn't a known native property 
As the message says, the element does not have a colspan property. It has the "colspan" attribute, but interpolation and property binding can set only properties, not attributes.

We need attribute bindings to create and bind to such attributes.

Attribute binding syntax resembles property binding. Instead of an element property between brackets, we start with the prefix attr, followed by a dot (.) and the name of the attribute. We then set the attribute value, using an expression that resolves to a string.

这是关于 the difference between properties and attributes 的相关 Stack Overflow post。

你可以试试下面，

@Component({
  selector: 'app',
  template: '<input [attr.maxlength]="maxLength" >',
})
export class App {
    maxLength = '10';
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

这是更新后的，它有效Plunker!!

如何绑定 'maxlength' 属性？

How to bind 'maxlength' attribute?

angular2-template

angular