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

这里是live example（打开控制台以查看错误）。

Answer 1

摘自Angular documentation，

属性绑定

当我们尝试写东西时，我们会痛苦地意识到这个事实像这样：
<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属性。它有＆＃34; colspan＆＃34;属性，但是   插值和属性绑定只能设置属性，而不能   属性。

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

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

这是关于the difference between properties and attributes的相关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!!

希望这会有所帮助!!

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

1 个答案: