Angular10 -等待第一行结束

Question

我有以下几点：

搜索组件：

search(zipcode){
  this.apiService.getRestaurants(zipcode);
  console.log(this.restaurants);
}

服务：

  getRestaurants(zip:string){
    this.http.get('../assets/data/' + zip + '.json').toPromise().then(
    results=>{
        console.log(results);
        this.mydata = results;
        return this.mydata;
    }
  );
}

getRestaurants获取一个与压缩关联的JSON文件并将其设置为this.mydata (虽然我可能只返回results，但是嘿)。它在getRestaurants中打印出JSON，但在搜索组件中打印undefined。我知道在我发回它之前，我遗漏了一些关于解决它的明显的东西，但是我的GoogleFu今天失败了。如何将数据放回父组件中进行处理？

Answer 1

您应该更改为：

搜索组件：

search(zipcode){
  this.apiService.getRestaurants(zipcode).then(restaurants => {
    this.restaurants = restaurants;
    console.log(this.restaurants);
  }
}

服务：

getRestaurants(zip:string){
    return this.http.get('../assets/data/' + zip + '.json').toPromise().then(
    results=>{
        console.log(results);
        this.mydata = results;
        return this.mydata;
    }
  );
}

虽然我不确定您为什么要将HttpClient返回的可观察对象转换为promise，但您可能应该将其保留为可观察对象。

Answer 2

问题是typescript在你得到答案之前就在做you‘’re console.log。

是否改用订阅？Angular使用observable工作得非常好！！(有关更多信息，请参阅RxJS库)

此外，我强烈建议在所有应用程序中使用类型，并更改变量，使其具有有意义的名称。

理论上，您的服务应该是这样的：

@Injectable({
  providedIn: 'root'
})
export class RestaurantService {
  
  private restaurantList: Restaurant[] = [];
  private restaurantListSubject: BehaviorSubject<Restaurant[]>
                      = new BehaviorSubject<Restaurant[]>([]);
  public restaurantList$(): Observable<Restaurant[]> {
    return this.restaurantListSubject.asObservable();
  }

  public getRestaurants(zip:string): Observable<Restaurant[]>{
    this.http.get<Restaurant[]>('../assets/data/' + zip + '.json').pipe(
      tap(
        restaurants => {
          console.log(restaurants);
          this.restaurantList = restaurants;
          this.restaurantListSubject.next(this.restaurant);
        }
      )
    );
  }
}

搜索组件(您可以在那里和console.log订阅)：

export class SearchComponent {
  public search(zipcode): void {
    this.apiService.getRestaurants(zipcode).subscribe(restaurants => {
      console.log(restaurants); // will be defined
    });
    console.log(this.restaurants); // will be undefined
  }
}