Question

我是Angular 2的新人，我有以下问题。我试图将组件属性绑定到输入的本机属性（maxlength），我无法做到。

代码如下：

textbox.ts

@Component({
selector: 'icb-textbox',
inputs: [
    'placeholder',
    'mxlength',
    'enabled',
    'mandatory',
    'description',
    'type'],
templateUrl: 'Common/Components/Textbox/textbox.html',
styleUrls: ['Common/Components/Textbox/textbox.css']
})
export class Textbox {

    private placeholder: string;
    private mxlength: number;
    private enabled: boolean;
    private mandatory: boolean;
    private description: string;
    private type: string;
}

textbox.html

 <input type="text" maxlength="{{mxlength}}" [(ngModel)]="value" placeholder="{{placeholder}}" [disabled]="!enabled"/>

在父亲的父亲面前成分：

<icb-textbox placeholder="Name" 
                 mxlength="4" 
                 [mandatory]="false" 
                 [enabled]="true" 
                 description="Put your name">

属性＆＃39;占位符＆＃39;并且＆＃39;禁用＆＃39;工作正常，但我可以使maxlength工作。我试过[maxlength]并且我得到了这个错误：无法绑定到＆＃39; maxlength＆＃39;因为它不是一个已知的本地财产。

谢谢。

Answer 1

使用

[attr.maxlength]= 'your value'

因为默认是角度外观属性绑定。告诉angular显式使用我们已经使用了这种语法

Answer 2

改为使用

[attr.maxlength]="someValue"

或

attr.maxlength="{{someValue}}"

显式绑定到属性而不是属性。

Answer 3

实际上，您可以通过使用属性绑定（方括号）包装它来直接绑定到输入的maxLength属性。

因此，您的HTML将如下所示：

<input type="text" [maxLength]="mxLength">

在你的TypeScript文件中：

mxLength: string = 4;

将组件属性绑定到输入的本机属性

3 个答案: