2016-12-28 2 views
2

A имеют простую форму поиска. То, что я пытаюсь сделать, это:Угловой 2 Подождите, пока не поступит результат службы

  • дают Nummer в поле ввода
  • нажмите на кнопку поиска
  • служба находит элемент и возвращает его обратно в виде

Это работает, но только если я дважды нажимаю кнопку «Поиск». Проблема в том, что я думаю, что основанные данные еще не пришли из службы, когда я пытаюсь работать над этим.

App

@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]; 
     }); 

} 

Как я могу загрузить объект (данные) первый затем начать работать над этим?

+1

Google о JavaScript Promise и угловыми 2 Реализация на то же самое. Вот где ваше решение лежит. –

ответ

2

Вы должны использовать более сложные обозначения в then вызова:

onSearch(nummer) { 
    this.myService.getByNummer(nummer).then((i: Instelling) => { 
     this.selectedInstelling = i; 
     //do whatever you want in here... 
    }); 
} 
Смежные вопросы