2017-03-18 11 views
6

मैं कोणीय 2 और कोणीय सामग्री के साथ प्रयोग कर रहा हूं। मैंने *ngFor का उपयोग किया ताकि कोणीय <input> तत्व मेरे लिए तत्व उत्पन्न कर सकें। हालांकि, परिणामी वेबपृष्ठ में, जेनरेट किए गए तत्व में name विशेषता नहीं है।<input> तत्वों के साथ कोणीय 2 "नाम" विशेषता का बाध्यकारी * ngFor

यह order-form.component.html में कोड है, जो इनपुट करने के लिए फल के विभिन्न प्रकार की संख्या उपयोगकर्ता पूछता है का हिस्सा है:

import { Component, OnInit } from "@angular/core"; 
import { Order } from "app/order"; 
import { PAYMENTS } from "app/payments"; 
import { OrderService } from "app/order.service"; 

@Component({ 
    selector: 'app-order-form', 
    templateUrl: './order-form.component.html', 
    styleUrls: ['./order-form.component.css'] 
}) 
export class OrderFormComponent implements OnInit { 

    order = new Order(); 

    payments = PAYMENTS; 

    fruits: string[] = [ 
    'apples', 
    'oranges', 
    'bananas' 
    ]; 

    constructor(public service: OrderService) { 
    } 

    ngOnInit() { 
    } 

    get totalCost() { 
    return this.service.getTotalCost(this.order); 
    } 

    onFocus(element: HTMLElement) { 
    element.blur(); 
    } 

    onSubmit() { 
    console.log('onSubmit'); 
    } 

    onInput(element: HTMLInputElement) { 
    console.log(element); 
    if (!this.service.isValidIntString(element.value)) { 
     window.alert(`Please input a correct number for ${element.name}`); 
     element.value = '0'; 
    } 
    } 

    capitalize(str: string): string { 
    return this.service.capitalize(str); 
    } 

    get debug() { 
    return JSON.stringify(this.order, null, 2); 
    } 
} 

Chrome में:

<md-list-item> 
    <md-icon md-list-icon>shopping_cart</md-icon> 
    <md-input-container *ngFor="let fruit of fruits" class="fruit-input"> 
    <input mdInput [(ngModel)]="order[fruit]" [placeholder]="capitalize(fruit)" 
      [id]="fruit" name="{{fruit}}" required value="0" #fruitInput 
      (input)="onInput(fruitInput)"> 
    </md-input-container> 
</md-list-item> 

यह इसी order-form.component.ts है ब्राउज़र, जब मैं 'सेब' <input> पर राइट क्लिक करता हूं, तो name तत्व की विशेषता खाली है, लेकिन ng-reflect-nameapples पर सही ढंग से सेट है? इस समस्या को कैसे हल करें? No name attribute here, but ng-reflect-name is apples

+0

क्या आपको कोई त्रुटि मिल रही है? – Aravind

+0

@ अरविंद नीचे कंसोल से, कोई त्रुटि नहीं है। –

उत्तर

9

अंतिम जवाब

उपयोग करें ([name]="fruit" या name="{{fruit}}") और ([attr.name]="fruit" या attr.name="{{fruit}}") एक साथ काम करेंगे।

अद्यतन

आप name विशेषता के लिए मूल्य के रूप में स्ट्रिंग 'fruit' उपयोग करने के लिए, का उपयोग

name="fruit" 

या

name="{{'fruit'}}" 

या [नाम] चाहते हैं = " ' फल '

अन्यथा आप घटकों क्षेत्र fruit (जो आपके घटक है प्रतीत नहीं होता है) का मूल्य

मूल

कोणीय संपत्ति डिफ़ॉल्ट रूप से बाध्यकारी है बाँध। आप बाध्यकारी विशेषता चाहते हैं तो आप बनाने के लिए है कि स्पष्ट

attr.name="{{fruit}}" (for strings only) 

या

[name]="fruit" 

भी देखें

+0

जब मैं 'attr का उपयोग करता हूं।name = "{{fruit}}" ब्राउज़र मुझे त्रुटि देगा: अगर ngModel को किसी फ़ॉर्म टैग के भीतर प्रयोग किया जाता है, तो नाम विशेषता को सेट किया जाना चाहिए या फॉर्म नियंत्रण को ngModelOptions में 'स्टैंडअलोन' के रूप में परिभाषित किया जाना चाहिए। जब मैं '[name] =" फल "का उपयोग करता हूं, तो परिणाम बिल्कुल नहीं बदला जाता है। –

+0

फिर समस्या कुछ और है। तो आप वास्तव में ' 'में जोड़े गए' नाम 'विशेषता के बारे में परवाह नहीं करते हैं, तो आप बस' ngModel' को काम करना चाहते हैं? –

+0

मुझे लगता है कि आप वास्तव में 'नाम = "फल चाहते हैं" ' –

संबंधित मुद्दे