कोणीय 2 ngValue null

Question

के साथ चयन करें मैं यहां क्या करने की कोशिश कर रहा हूं: मैं ngValue के साथ ऑब्जेक्ट्स की एक सरणी से जुड़ी एक चुनिंदा सूची चाहता हूं, लेकिन पहले विकल्प को null मान के साथ "कोई नहीं" विकल्प होना चाहिए।

मॉडल:

this.managers = [ 
    { id: null, name: "(None)" }, 
    { id: 1, name: "Jeffrey" }, 
    { id: 2, name: "Walter" }, 
    { id: 3, name: "Donnie" } 
    ]; 

this.employee = { 
    name: "Maude", 
    managerId: null 
}; 

दृश्य:

<select [(ngModel)]="employee.managerId"> 
    <option *ngFor="#manager of managers" [ngValue]="manager.id">{{ manager.name }}</option> 
    </select> 

लोड होने पर, सूची सही तरीके से "कोई नहीं" तत्व को बांधता है। लेकिन यदि आप किसी भिन्न आइटम और पीछे बदल जाते हैं, तो मॉडल मान अब 0: null की स्ट्रिंग पर स्विच हो जाता है। यह बहुत असुविधाजनक है; इसका मतलब है कि मुझे सर्वर को सहेजने का प्रयास करने से पहले मुझे मान को अवरुद्ध करना होगा और मैन्युअल रूप से इसे शून्य में बदलना होगा।

यहाँ डेमो के साथ Plunker है: http://plnkr.co/edit/BH96RWZmvbbO63ZAxgNX?p=preview

यह सुंदर आसानी से एक अतिरिक्त <option value="">None</option>

यह लगता है जैसे कि यह एक बहुत आम परिदृश्य होगा साथ कोणीय 1 में किया गया था, और अभी तक मैं असमर्थ रहे हैं किसी भी समाधान खोजने के लिए। मैंने <option [ngModel]="null">None</option> जोड़ने का भी प्रयास किया है, लेकिन इसके परिणामस्वरूप 0: null मान होता है।

कोई सुझाव?

Answer 1

मेरे लिए यह वास्तव में एक बग की तरह दिखता है, लेकिन यदि आप तेजी से समाधान की तलाश में हैं, तो आप पहचानकर्ता को string पर आसानी से परिवर्तित कर सकते हैं। इसे समस्या का समाधान करना चाहिए लेकिन आपको उस काम को करने के लिए कुछ अतिरिक्त कदम उठाने चाहिए।

उदाहरण Plnkr example

या यदि आप ऐसा करने के लिए है कि जिस तरह से आप NG1 से उल्लेख में जा रहे हैं, आप इस तरह कर सकते हैं देखें: Plnkr example

मुझे पता है, कि यह सबसे अच्छा समाधान नहीं है, लेकिन आशा इस बग को एनजी टीम द्वारा तय करने से पहले आपकी मदद करेगा!

• https://github.com/angular/angular/issues/10349
• https://github.com/angular/angular/pull/12026

Answer 2

स्ट्रिंग 'अशक्त' के बजाय

मैं अपने टाइपप्रति में बाद में करने के लिए तुलना करने के लिए एक खाली वस्तु बनाया।

घटक में:

blankObject = { 
    toString() { 
     return 'blank object'; 
    } 
}; 

isBlank() { 
    return this.filter.searchValue == null || this.filter.searchValue === this.blankObject; 
} 

खाका में:

<select [(ngModel)]="filter.searchValue"> 
    <option [ngValue]="blankObject"></option> 
    <option *ngFor="let item of filter.selectOptions" [ngValue]="item.value"> 
       {{item.label}} 
    </option> 
</select>` 

Answer 3

मैं TabascoMustang के reddit जवाब पर पहुंच जाएंगे, मैं उसके समाधान को लागू करने और शानदार काम करते हैं:

TabascoMustang's reddit answer

इस काम करना चाहिए (वर्तमान NG2 rc के लिए अपडेट):

<select [ngModel]="audit.managerId || ''" (ngModelChange)="audit.managerId = $event"> 
    <option value="">Please Select</option> 
    <option *ngFor="let contact of audit.contacts">{{ contact.name }} 
    </option> 
</select> 

Answer 4

बदलें [ngValue] अभी [value] को

Answer 5

अब तक इसके लिए एक open issue in the github repository है।

मुझे लगता है कि ngModelChange जोड़कर एक काम के रूप में घटक को कुछ भी जोड़ने के बिना मूल्य को शून्य में सेट करने का सबसे आसान तरीका है।

दृश्य:

<select [(ngModel)]="employee.managerId" 
     (ngModelChange)="employee.managerId = $event ? $event : null"> 
    <option *ngFor="#manager of managers" [value]="manager.id">{{ manager.name }}</option> 
</select> 

ध्यान दें कि ngValue अब value