Angular2

Question

में ऑब्जेक्ट्स की सरणी पर चयन/विकल्प/NgFor का उपयोग कैसे करें मुझे अंगुलर 2 में एक चयन बनाने में परेशानी हो रही है जो स्ट्रिंग्स के बजाय ऑब्जेक्ट्स की सरणी द्वारा समर्थित है। मुझे पता था कि AngularJS में ngOptions का उपयोग करके इसे कैसे किया जाए, लेकिन यह Angular2 में काम नहीं कर रहा है (मैं अल्फा 42 का उपयोग कर रहा हूं)।

नीचे दिए गए नमूने में, मेरे पास चार चयन हैं, लेकिन उनमें से केवल दो ही काम करते हैं।

1. 'चयन स्ट्रिंग' एक साधारण स्ट्रिंग-आधारित चयन है, और यह ठीक काम करता है।
2. '2-तरफा बाध्यकारी के माध्यम से ऑब्जेक्ट का चयन करें' 2-तरफा बाध्यकारी का उपयोग करने का मेरा प्रयास था। दुर्भाग्यवश, यह दो तरीकों से विफल रहता है - जब पृष्ठ लोड होता है, तो चयन गलत मान (बार के बजाय foo) दिखाता है, और जब मैं सूची में कोई विकल्प चुनता हूं, तो 'ऑब्जेक्ट ऑब्जेक्ट]' मान बैकिंग स्टोर पर भेजा जाता है सही मूल्य के बजाय।
3. 'घटना के माध्यम से ऑब्जेक्ट का चयन करें' मेरा चयन $ इवेंट से चयनित मूल्य प्राप्त करने का प्रयास था। यह दो तरीकों से भी विफल रहता है - शुरुआती लोड # 2 जैसा ही गलत है, और जब मैं सूची में कोई विकल्प चुनता हूं, तो ईवेंट 'ऑब्जेक्ट ऑब्जेक्ट]' को ईवेंट से पुनर्प्राप्त किया जाता है, इसलिए मैं नहीं कर सकता सही मूल्य प्राप्त करें। चयन साफ़ हो जाता है।
4. 'स्ट्रिंग के माध्यम से ऑब्जेक्ट का चयन करें' एकमात्र दृष्टिकोण है जो किसी ऑब्जेक्ट का उपयोग करता है जो काम करता है। दुर्भाग्यवश, यह वास्तव में # 1 से स्ट्रिंग सरणी का उपयोग करके और स्ट्रिंग से ऑब्जेक्ट और बैक में मान को परिवर्तित करके काम करता है।

यदि यह इच्छित तरीका है, तो मैं # 4 कर सकता हूं, लेकिन यह बहुत खराब लगता है। क्या कोई और दृष्टिकोण है? क्या मैं अल्फा में बहुत जल्दी हूँ? क्या मैंने कुछ मूर्खतापूर्ण किया?

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2'; 

interface TestObject { 
    name:string; 
    value:number; 
} 

@Component({ 
    selector: 'app', 
    template: ` 
    <h4>Select String</h4> 
    <select [(ng-model)]="strValue"> 
     <option *ng-for="#o of strArray" [value]="o">{{o}}</option> 
    </select> 

    <h4>Select Object via 2-way binding</h4> 
    <select [(ng-model)]="objValue1"> 
     <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option> 
    </select> 

    <h4>Select Object via event</h4> 
    <select [ng-model]="objValue2" (change)="updateObjValue2($event)"> 
     <option *ng-for="#o of objArray" [value]="o">{{o.name}}</option> 
    </select> 

    <h4>Select Object via string</h4> 
    <select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"> 
     <option *ng-for="#o of strArray" [value]="o">{{o}}</option> 
    </select> 

    <div><button (click)="printValues()">Print Values</button></div> 

    `, 
    directives: [FORM_DIRECTIVES, NgFor] 
}) 
export class AppComponent { 
    objArray:TestObject[] = [{name: 'foo', value: 1}, {name: 'bar', value: 1}]; 
    objValue1:TestObject = this.objArray[1]; 
    objValue2:TestObject = this.objArray[1]; 
    objValue3:TestObject = this.objArray[1]; 

    strArray:string[] = this.objArray.map((obj:TestObject) => obj.name); 
    strValue:string = this.strArray[1]; 

    updateObjValue2(event:Event):void { 
    const value:string = (<HTMLSelectElement>event.srcElement).value; 

    this.objValue2 = this.objArray.find((obj:TestObject) => obj.name === value); 
    } 

    updateObjValue3(event:Event):void { 
    const value:string = (<HTMLSelectElement>event.srcElement).value; 

    this.objValue3 = this.objArray.find((obj:TestObject) => obj.name === value); 
    } 

    printValues():void { 
    console.log('strValue', this.strValue); 
    console.log('objValue1', this.objValue1); 
    console.log('objValue2', this.objValue2); 
    console.log('objValue3', this.objValue3); 
    } 
} 

Answer 1

मैं DOM या Javascript/टाइपप्रति के साथ कोई विशेषज्ञ हूँ, लेकिन मुझे लगता है कि डोम-टैग असली जावास्क्रिप्ट वस्तु किसी भी तरह नहीं संभाल सकते हैं। लेकिन एक स्ट्रिंग के रूप में पूरी वस्तु डाल और यह एक वस्तु को पार्स करने वापस/JSON मेरे लिए काम किया:

interface TestObject { 
    name:string; 
    value:number; 
} 

@Component({ 
    selector: 'app', 
    template: ` 
     <h4>Select Object via 2-way binding</h4> 

     <select [ngModel]="selectedObject | json" (ngModelChange)="updateSelectedValue($event)"> 
     <option *ngFor="#o of objArray" [value]="o | json" >{{o.name}}</option> 
     </select> 

     <h4>You selected:</h4> {{selectedObject }} 
    `, 
    directives: [FORM_DIRECTIVES] 
}) 
export class App { 
    objArray:TestObject[]; 
    selectedObject:TestObject; 
    constructor(){ 
    this.objArray = [{name: 'foo', value: 1}, {name: 'bar', value: 1}]; 
    this.selectedObject = this.objArray[1]; 
    } 
    updateSelectedValue(event:string): void{ 
    this.selectedObject = JSON.parse(event); 
    } 
} 

Answer 2

मैं नहीं जानता कि क्या बातें अल्फा में की तरह थे, लेकिन मैं बीटा उपयोग कर रहा हूँ 12 सही अब और यह ठीक काम करता है।

<select [(ngModel)]="simpleValue"> // value is a string or number 
    <option *ngFor="#obj of objArray" [value]="obj.value">{{obj.name}}</option> 
</select> 

आप वास्तविक वस्तु पर मैच के लिए चाहते हैं, मैं इसे इस तरह करना चाहते हैं:: आप वस्तुओं की एक सरणी है, तो इस तरह की एक चयन बनाने

<select [(ngModel)]="objValue"> // value is an object 
    <option *ngFor="#obj of objArray" [ngValue]="obj">{{obj.name}}</option> 
</select>