Question

A有一个简单的搜索表单。我尝试做的是：

在输入字段中输入数字
点击搜索按钮
service找到该项并将其返回到表单

仅当我在搜索按钮上单击两次时才有效。问题是我认为当我尝试使用它时，已创建的数据尚未来自服务。

应用

@Component({
    template: `
    <input pInputText #inputNr"/>
    <button pButton type="button" (click)="onSearch(inputNr.value)"></button>
            `
})

constructor(private myService: MyService) { }

ngOnInit() {
    this.selectedInstelling = new Instelling();
}

onSearch(nummer) {

    this.myService.getByNummer(nummer)
                              .then(i => this.selectedInstelling = i);

    ......... // I want to do some work here when I get the data

    console.log(this.selectedInstelling); // First Click:  Object { vorms: Array[0] }
                                          // Second Click: Object { id: 1, naam: "Provincia...... }
}

服务

getByNummer(nummer: string) {

    return this.http.get('my json file')
        .toPromise()
        .then(res => <Instelling[]> res.json().filter(i => i.inummer === nummer))
        .then(data => {
            return data[0];
        });

}

如何首先加载对象（数据）然后开始处理它？</ p>

Answer 1

您必须在then电话中使用更精细的符号：

onSearch(nummer) {
    this.myService.getByNummer(nummer).then((i: Instelling) => {
       this.selectedInstelling = i;
       //do whatever you want in here...
    });
}

Angular 2等到服务结果到来

1 个答案: