Angular2自动建议给出未定义的值

尝试用angular实现自动建议

 $ npm install ng2-auto-complete --save

将地图和包添加到systemjs.config.js

 map['ng2-auto-complete'] = 'node_modules/ng2-auto-complete/dist';
 packages['ng2-auto-complete'] = { main: 'ng2-auto-complete.umd.js', ...]

添加了组件

@Component({
    selector: 'person',
    templateUrl: 'app/person/person.component.html'
})
export class PersonComponent implements OnInit {
    myForm: FormGroup;   
    staffInfo :  PersonalMastModel[];
    public arrayOfKeyValues2: any[] = [
    {key:1, name:'Key One'}, 
    {key:2, name:'Key Two'}, 
    {key:3, name:'Key Three'},
    {key:4, name:'Key Four'}
  ];
personalData(personName: String): Observable<DepartmentModel[]>{
        let headers = new Headers();        
            if(personName!= undefined){

                headers.append('Content-Type','application/json');
                headers.append('Access-Control-Allow-Origin', '*');
                return this.http.post(AppUtils.GET__MASTER_URL //return a list of department
               ,{personName:personName}
               ,{headers:headers})
               .map(response => response.json())
               .catch(this.handleError);
            }


    }
...............

@组件({
选择器：'人'，
templateUrl:'app/person/person.component.html'
})
导出类PersonComponent实现OnInit{
myForm:FormGroup；
staffInfo:PersonalMastModel[]；
public arrayOfKeyValues2:任意[]=[
{键：1，名称：'key One'}，
{键：2，名称：'key Two'}，
{键：3，名称：'key Three'}，
{键：4，名称：'key Four'}
];
personalData（personName:String）：可观察{
let headers=新的headers（）；
if（personName！=未定义）{
append（'Content-Type'，'application/json'）；
headers.append（'Access-Control-Allow-Origin'，'*'）；
返回this.http.post（AppUtils.GET\u MASTER\u URL//返回部门列表
，{personName:personName}
，{headers:headers}）
.map（response=>response.json（））
.接住（这个.把手错误）；
}
}
...............

In person.component.html添加了标记

 <input auto-complete [source]="arrayOfKeyValues2"
      [(ngModel)]="model3"
      placeholder="enter text"
      value-property-name="key"
      display-property-name="name"/>selected: {{model3 | json}}<br/><br/>

selected:{{model3 | json}}

在下拉列表中，它是（未定义的）未定义的。

---

另外，如何更改此设置，以便每次都从服务器端获取数据。

使用对象而不是字符串时，需要使用

列表格式化程序

属性来调用值格式化程序

 [list-formatter]="listFormatter"
 value-property-name="key"
 display-property-name="name">

并将

listFormatter

定义为

listFormatter = (data: any) => `<span>(${data.key}) ${data.name}</span>`;

listFormatter=（数据：any）=>`（${data.key}）${data.name}`；

下面是一个代码的工作示例

---

• 还有，我该如何改变这一点，以便每次都能从服务器端获取数据

---

您可以使用

valueChanged

属性将其绑定到从服务器获取数据的函数，尽管这是一个完全不同的问题。

在其文档中提到：valueChanged/ngModelChange，在选择新下拉列表时执行的回调函数。例如，（valueChanged）=“myCallback（$event）”-在从下拉列表中选择新值时调用，而不是在键入过程中。是的，这不是您想要的吗？您可以在回调函数中进行服务器调用！不，不是在Onselect上，而是在keypress上。这将是大量的服务器调用。我可以问一下为什么吗？可能更明智的做法是事先将其加载到后台，然后显示按一下键好吗？