कोणीय 2 इनपुट या texarea

Question

मैं एक maxlength सेट के साथ एक इनपुट युक्त निम्नलिखित कोणीय 2 घटक प्रदान कर सकते हैं की maxlength के लिए बाध्य। हालांकि, मैं एक बाध्यकारी के माध्यम से 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 (त्रुटि देखने के लिए खुला कंसोल) है। Angular documentation से

Answer 1

अंश,

गुण

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 बारे में है।

आप नीचे दिए गए कोशिश कर सकते हैं,

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


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

यहाँ अद्यतन किया जाता है और यह काम करता Plunker!!

आशा इस मदद करता है !!