Angular 2从服务器获取数据的正确方法

时间:2017-12-08 08:12:50

标签: forms angular http

我想从数据库中获取数据。我正在关注angular.io网页上的例子,但我不知道我做得对不对。

我有一个表单,当用户填写邮政编码字段时,我会调用数据库获取城市的名称,如果不存在,请让用户填写。 我的问题是我不知道如何正确地做到这一点。

在我的服务中。

checkCp(city: City): Observable<any> {
  return this.http.get<any>(this.backendUrl + 'api/city/' + city.cp).pipe(
    tap(city => console.log("fetched"))      
  );
}

这是我的component.js

checkCp(): void {
  this.modal.header = 'Searching city';
  this.modal.text = 'Please wait';
  this.openWaitModal();
  this.studentService.checkCp(this.city)
    .subscribe(cityFromDb => {
      if(cityFromDb ===null) {
        this.closeWaitModal();
        this.modal.header = 'Postal code not found';
        this.modal.text = 'Insert the name of the city';
        this.modal.no = 'Cancel';
        this.modal.yes = 'Insert';
        this.modal.action = 'newCity';
        this.modal.enableInput = true;
        this.openModal();
      }else{        
        this.closeWaitModal();        
        this.city = cityFromDb.city; // I can't access cityFromDb.name
                                     // i access via cityFromDb.city.name
     }
   }, err => {
     this.errorHandler(err);
   })
}

1 个答案:

答案 0 :(得分:3)

您可以按如下方式致电您的服务:

checkCp(city: City): Observable<any> {
  return this.http.get<any>(this.backendUrl + 'api/city/' + city.cp);
};

这会将Observable返回到您的component.ts

component.ts中的代码现在可以正常工作