<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">Here is my code: the template is:<br>
<code class="notranslate">&lt;div&gt; 时间: {{DataContext.时间}} &lt;/div&gt;</code></p>
<p dir="auto">Here '时间' is Chinese char which means time, and in the typescript file. I define a DataContext property.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export class TestClass{
 @Input()
 DataContext:any;  }"><pre class="notranslate"><code class="notranslate">export class TestClass{
 @Input()
 DataContext:any;  }
</code></pre></div>
<p dir="auto">But it not work, I got a error. Here is the error message, "Template parse errors: Parser Error: Unexpected token Lexer Error: Unexpected character {{时间}}......"</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">I hope the data binding can work with Chinese property name.<br>
<strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">I really need it support Chinese char, because the json data from a old system, and all the data's properties use Chinese char. Without this,  I will have to convert all the json files.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">Angular version: 2.1.1</p>
<ul dir="auto">
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
</ul>

<p dir="auto">Chrome version: 54.0.2840.99</p>
<ul dir="auto">
<li><strong>Language:</strong> [all |TypeScript X.X | ES6/7 | ES5]<br>
TypeScript  2.1.0, ES5, I have tried 2.0.6.</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
node --version=v6.9.1</li>
</ul>
<p dir="auto">I'm having trouble creating a select in Angular2 that is backed by an array of Objects instead of strings. I knew how to do it in AngularJS using ngOptions, but it doesn't seem to work in Angular2 (I'm using alpha 42).</p>
<p dir="auto">In the sample below, I have five selects, but only three of them work.</p>
<ol dir="auto">
<li>'Select String' is a simple string-based select, and it works fine.</li>
<li>'Select Object via 2-way binding' was my attempt to use 2-way binding. Unfortunately, it fails in two ways - when the page loads, the select shows the wrong value (foo instead of bar), and when I select an option in the list, the value '[object Object]' gets sent to the backing store instead of the correct value.</li>
<li>'Select Object via event' was my attempt to get the selected value from $event. It fails in two ways, too - the initial load is incorrect in the same way as (2), and when I selection an option in the list, the value '[object Object]' is retrieved from the event, so I can't get the right value. The select gets cleared.</li>
<li>'Select Object via string' is an approach that uses an object that works. Unfortunately, it really works by using the string array from (1) and converting the value from string to object and back.</li>
<li>'Select Object via JSON' might be a bit better than (4) because it doesn't require the string array, but it does involve using JSON each way. Also, I'm not sure if getting the Event from (change) is better or worse than getting the stringified objected from (ng-model-change). (@Chocoloper helped me with this version)</li>
</ol>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component, FORM_DIRECTIVES, NgFor, Inject} from 'angular2/angular2';
import {RouteParams} from 'angular2/router';

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

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

            &lt;h4&gt;Select Object via 2-way binding&lt;/h4&gt;
            &lt;select [(ng-model)]=&quot;objValue1&quot;&gt;
                &lt;option *ng-for=&quot;#o of objArray&quot; [value]=&quot;o&quot;&gt;{{o.name}}&lt;/option&gt;
            &lt;/select&gt;

            &lt;h4&gt;Select Object via event&lt;/h4&gt;
            &lt;select [ng-model]=&quot;objValue2&quot; (change)=&quot;updateObjValue2($event)&quot;&gt;
                &lt;option *ng-for=&quot;#o of objArray&quot; [value]=&quot;o&quot;&gt;{{o.name}}&lt;/option&gt;
            &lt;/select&gt;

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

            &lt;h4&gt;Select Object via JSON&lt;/h4&gt;
            &lt;select [ng-model]=&quot;stringify(objValue4)&quot; (ng-model-change)=&quot;updateObjValue4($event)&quot;&gt;
                &lt;option *ng-for=&quot;#o of objArray&quot; [value]=&quot;stringify(o)&quot;&gt;{{o.name}}&lt;/option&gt;
            &lt;/select&gt;

            &lt;div&gt;&lt;button (click)=&quot;printValues()&quot;&gt;Print Values&lt;/button&gt;&lt;/div&gt;`,
  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];
  objValue4:TestObject = this.objArray[1];

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

  stringify(o:any):string {
    return JSON.stringify(o);
  }

  updateObjValue2(event:Event):void {
    const value:string = (&lt;HTMLSelectElement&gt;event.srcElement).value;

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

  updateObjValue3(event:Event):void {
    const value:string = (&lt;HTMLSelectElement&gt;event.srcElement).value;

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

  updateObjValue4(event:string):void {
    this.objValue4 = JSON.parse(event);
    // if there were functions on TestObject, JSON.parse wouldn't be enough; we'd need this:
    //this.objValue4 = this.objArray.find((obj:TestObject) =&gt; obj.name === JSON.parse(event).name);
  }

  printValues():void {
    console.log('strValue', this.strValue);
    console.log('objValue1', this.objValue1);
    console.log('objValue2', this.objValue2);
    console.log('objValue3', this.objValue3);
    console.log('objValue4', this.objValue4);
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">,</span> <span class="pl-smi">FORM_DIRECTIVES</span><span class="pl-kos">,</span> <span class="pl-smi">NgFor</span><span class="pl-kos">,</span> <span class="pl-smi">Inject</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">RouteParams</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/router'</span><span class="pl-kos">;</span>

<span class="pl-k">interface</span> <span class="pl-smi">TestObject</span> <span class="pl-kos">{</span>
  <span class="pl-c1">name</span>:<span class="pl-smi">string</span><span class="pl-kos">;</span>
  <span class="pl-c1">value</span>:<span class="pl-smi">number</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`&lt;h4&gt;Select String&lt;/h4&gt;</span>
<span class="pl-s">            &lt;select [(ng-model)]="strValue"&gt;</span>
<span class="pl-s">                &lt;option *ng-for="#o of strArray" [value]="o"&gt;{{o}}&lt;/option&gt;</span>
<span class="pl-s">            &lt;/select&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">            &lt;h4&gt;Select Object via 2-way binding&lt;/h4&gt;</span>
<span class="pl-s">            &lt;select [(ng-model)]="objValue1"&gt;</span>
<span class="pl-s">                &lt;option *ng-for="#o of objArray" [value]="o"&gt;{{o.name}}&lt;/option&gt;</span>
<span class="pl-s">            &lt;/select&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">            &lt;h4&gt;Select Object via event&lt;/h4&gt;</span>
<span class="pl-s">            &lt;select [ng-model]="objValue2" (change)="updateObjValue2($event)"&gt;</span>
<span class="pl-s">                &lt;option *ng-for="#o of objArray" [value]="o"&gt;{{o.name}}&lt;/option&gt;</span>
<span class="pl-s">            &lt;/select&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">            &lt;h4&gt;Select Object via string&lt;/h4&gt;</span>
<span class="pl-s">            &lt;select [ng-model]="objValue3.name" (change)="updateObjValue3($event)"&gt;</span>
<span class="pl-s">                &lt;option *ng-for="#o of strArray" [value]="o"&gt;{{o}}&lt;/option&gt;</span>
<span class="pl-s">            &lt;/select&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">            &lt;h4&gt;Select Object via JSON&lt;/h4&gt;</span>
<span class="pl-s">            &lt;select [ng-model]="stringify(objValue4)" (ng-model-change)="updateObjValue4($event)"&gt;</span>
<span class="pl-s">                &lt;option *ng-for="#o of objArray" [value]="stringify(o)"&gt;{{o.name}}&lt;/option&gt;</span>
<span class="pl-s">            &lt;/select&gt;</span>
<span class="pl-s"></span>
<span class="pl-s">            &lt;div&gt;&lt;button (click)="printValues()"&gt;Print Values&lt;/button&gt;&lt;/div&gt;`</span><span class="pl-kos">,</span>
  <span class="pl-c1">directives</span>: <span class="pl-kos">[</span><span class="pl-smi">FORM_DIRECTIVES</span><span class="pl-kos">,</span> <span class="pl-smi">NgFor</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppComponent</span> <span class="pl-kos">{</span>
  <span class="pl-c1">objArray</span>:<span class="pl-smi">TestObject</span><span class="pl-kos">[</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-kos">{</span><span class="pl-c1">name</span>: <span class="pl-s">'foo'</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">name</span>: <span class="pl-s">'bar'</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-c1">1</span><span class="pl-kos">}</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
  <span class="pl-c1">objValue1</span>:<span class="pl-smi">TestObject</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objArray</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
  <span class="pl-c1">objValue2</span>:<span class="pl-smi">TestObject</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objArray</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
  <span class="pl-c1">objValue3</span>:<span class="pl-smi">TestObject</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objArray</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>
  <span class="pl-c1">objValue4</span>:<span class="pl-smi">TestObject</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objArray</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

  <span class="pl-c1">strArray</span>:<span class="pl-smi">string</span><span class="pl-kos">[</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objArray</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">obj</span>:<span class="pl-smi">TestObject</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-c1">strValue</span>:<span class="pl-smi">string</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">strArray</span><span class="pl-kos">[</span><span class="pl-c1">1</span><span class="pl-kos">]</span><span class="pl-kos">;</span>

  <span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">o</span>:<span class="pl-smi">any</span><span class="pl-kos">)</span>:<span class="pl-smi">string</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-smi">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">o</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">updateObjValue2</span><span class="pl-kos">(</span><span class="pl-s1">event</span>:<span class="pl-smi">Event</span><span class="pl-kos">)</span>:<span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">value</span>:<span class="pl-smi">string</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">&lt;</span><span class="pl-smi">HTMLSelectElement</span><span class="pl-kos">&gt;</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">srcElement</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">;</span>

    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objValue2</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objArray</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">obj</span>:<span class="pl-smi">TestObject</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">===</span> <span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">updateObjValue3</span><span class="pl-kos">(</span><span class="pl-s1">event</span>:<span class="pl-smi">Event</span><span class="pl-kos">)</span>:<span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">value</span>:<span class="pl-smi">string</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">&lt;</span><span class="pl-smi">HTMLSelectElement</span><span class="pl-kos">&gt;</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">srcElement</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">;</span>

    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objValue3</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objArray</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">obj</span>:<span class="pl-smi">TestObject</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">===</span> <span class="pl-s1">value</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">updateObjValue4</span><span class="pl-kos">(</span><span class="pl-s1">event</span>:<span class="pl-smi">string</span><span class="pl-kos">)</span>:<span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objValue4</span> <span class="pl-c1">=</span> <span class="pl-smi">JSON</span><span class="pl-kos">.</span><span class="pl-en">parse</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-c">// if there were functions on TestObject, JSON.parse wouldn't be enough; we'd need this:</span>
    <span class="pl-c">//this.objValue4 = this.objArray.find((obj:TestObject) =&gt; obj.name === JSON.parse(event).name);</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">printValues</span><span class="pl-kos">(</span><span class="pl-kos">)</span>:<span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'strValue'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">strValue</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'objValue1'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objValue1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'objValue2'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objValue2</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'objValue3'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objValue3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'objValue4'</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">objValue4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I can do (4) or (5) if that's the intended way, but they seem pretty clunky. Is there another approach? Am I just too early in the alpha? Did I do something silly?</p>