Typehead in ng2-bootstrap cannot show items in Angular 2
<blockquote>
  <p>UPDATED: It supports now nested property now. <a href="https://github.com/valor-software/ng2-bootstrap/issues/135" rel="nofollow">https://github.com/valor-software/ng2-bootstrap/issues/135</a></p>
</blockquote>

<hr>

<p>I am using <a href="http://valor-software.com/ng2-bootstrap/" rel="nofollow">ng2-bootstrap</a> in Angular 2.</p>

<p>I am trying to use Typeahead.</p>

<p>The example code </p>

<pre><code>private statesComplex:Array&lt;any&gt; = [
    {id: 1, name: 'Alabama'}, {id: 2, name: 'Alaska'}, {id: 3, name: 'Arizona'}];
</code></pre>

<p>and </p>

<pre><code>&lt;input [(ngModel)]="selected"
       [typeahead]="statesComplex"
       (typeaheadOnSelect)="typeaheadOnSelect($event)"
       [typeaheadOptionField]="'name'"
       class="form-control"&gt;
</code></pre>

<p>runs well.</p>

<p>But when I try to change the data format</p>

<pre><code>private statesComplex:Array&lt;any&gt; = [
    {id: 1, profile: {name: 'Alabama', email: '111'}}, {id: 2, profile: {name: 'Alaska', email: '222'}}, {id: 3, profile: {name: 'Arizona', email: '333'}}];
</code></pre>

<p>and use</p>

<pre><code>&lt;input [(ngModel)]="selected"
       [typeahead]="statesComplex"
       (typeaheadOnSelect)="typeaheadOnSelect($event)"
       [typeaheadOptionField]="'profile.name'"
       class="form-control"&gt;
</code></pre>

<p>It does not work. I think the problem is related with typeaheadOptionField, but I don't know how to write it.</p>

<p>Thanks</p>