javascript - 从函数 A 中获取 JSON 并将其传递给 angular2 中的函数 B

Question

我怎样才能进行同步 http 调用，我有 2 个共享服务来进行调用，首先是获取所有数据，然后执行 ngFor 以呈现项目 say to make 按钮。

共享服务

getOrderId(id) {
    return this.http.get('www.site.com/api/Order/' + id)
      .map(res => res.json());
  }
getOriginSite () {
    return this.http.get('www.site.com/api/Orders?originSite=2')
      .map(res => res.json());
  } 

因此 getOrdersFromOrigin() 在 ngOnInit 中首先被调用

getItemOrigin() {
        this.sharedService.getOriginSite ()
          .subscribe(data => {
            this.itemPrepare= data.Results;
          })
      }

    <div *ngFor="let prepare of itemPrepare">
      <button class="btn btn-success" (click)="getOrderId(prepare.Id); modal.open();">{{ prepare.Id }}</button> <br/><br/>

     <modal #modal>
      <modal-body>
            <p>{{ customerName }}</p>
      </modal-body>
      <modal-footer>
         <button (click)="modal.close()" type="button" class="btn btn-danger">Close</button>
         <button class="btn btn-primary" (click)="updateOrder(prepare.Id)">It's Ready</button>
       </modal-footer>
      </modal>
    </div>

这会在 UI 中创建按钮，然后当我单击它时，它会调用另一个 API，这也会在上面的模式中显示一些数据，但它必须等待几秒钟才能显示，因为它必须等待调用完成.当我将 this.currentOrderJosn 传递给 updateOrder() 时，这也会导致 未定义。

getItemJson(id) {
this.sharedService.getOrderId(id)
  .subscribe(data => {
    // Use this data for the POST
    this.currentOrderJson = data;
    this.customerName = data.Results.Customer.FirstName;
  })
}

updateItemJSON(id) {
    // Returns as undefined
    console.log(this.currentOrderJson)
}

那么我怎样才能使这些调用同步，这样它就不必等待几秒钟来显示数据，所以我可以在 中使用 this.currentOrderJSON() updateOrder().

Answer 1

  getOrderId(id) {
    return this.preparedOrderId = this.http.get('www.site.com/api/Order/' + id)
      .map(res => res.json())
      .toPromise();
  }

(click)="getOrderClickHandler(id)"

getOrderClickHandler() {
  getOrderId(id).then(id => updateOrder(id))
}

或

getOrderId(id) {
    this.http.get('www.site.com/api/Order/' + id)
      .map(res => res.json())
      .subscribe(val => this.preparedOrderId = val);
  }

(click)="updateOrder(prepare.Id)"

而后者假定您无法在从服务器获取响应期间关闭对话框。对于前者，这不会发生，因为它已正确链接，并且在 id 不可用之前不会调用 updateOrder()。