Angular 2绑定到输入或texarea的最大长度

Question

我可以渲染以下Angular 2组件,其中包含一个设置了maxlength的输入:

@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是输入控件的完全有效属性.

这是一个实例(打开控制台以查看错误).

Answer 1

Angular文档的摘录,

属性绑定

当我们尝试写这样的东西时,我们会痛苦地意识到这个事实:

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr> We get this

错误:

Template parse errors: Can't bind to 'colspan' since it
isn't a known native property 

如消息所示,元素没有colspan属性.它具有"colspan"属性,但插值和属性绑定只能设置属性,而不能设置属性.

我们需要属性绑定来创建和绑定到这些属性.

属性绑定语法类似于属性绑定.我们不是括号之间的元素属性,而是以前缀attr开头,后跟一个点(.)和属性的名称.然后,我们使用解析为字符串的表达式设置属性值.

这是关于属性和属性之间差异的相关Stack Overflow帖子.

你可以尝试下面,

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


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

这是更新的,它的作品Plunker !!

希望这可以帮助!!