ng2-bootstrap 中的 Typeahead 无法在 Angular 2 中显示项目

Question

更新：它现在支持嵌套属性。 https://github.com/valor-software/ng2-bootstrap/issues/135

---

我在 Angular 2 中使用 ng2-bootstrap。

我正在尝试使用 Typeahead。

示例代码

private statesComplex:Array<any> = [
    {id: 1, name: 'Alabama'}, {id: 2, name: 'Alaska'}, {id: 3, name: 'Arizona'}];

和

<input [(ngModel)]="selected"
       [typeahead]="statesComplex"
       (typeaheadOnSelect)="typeaheadOnSelect($event)"
       [typeaheadOptionField]="'name'"
       class="form-control">

运行良好。

但是当我尝试改变数据格式时

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

并使用

<input [(ngModel)]="selected"
       [typeahead]="statesComplex"
       (typeaheadOnSelect)="typeaheadOnSelect($event)"
       [typeaheadOptionField]="'profile.name'"
       class="form-control">

它不起作用。我认为问题与typeaheadOptionField有关，但我不知道该怎么写。

谢谢

Answer 1

看起来这种表示法不会被识别为子对象的嵌套属性（请参阅source）。在这种情况下，您可以稍微预处理数据。也许通过实际引入这个辅助属性：

this.statesComplex.forEach(state => state['profile.name'] = state.profile.name);

它将向所有对象添加新的profile.name 属性，因此预输入应该按预期工作。