Angular 2如何處理異步調用

Question

第一次以未定義形式單擊按鈕將返回，必須單擊兩次按鈕才能返回正確的結果。 返回結果后如何處理？ 單擊按鈕后返回正確的結果不是上一個？

Product.componet.html

 <div *ngIf="submitted">
    <h2>Product found</h2>
    <div class="row">
        <div class="col-xs-3">Price</div>
        <div class="col-xs-9  pull-left">Product details</div>
        <div class="col-xs-3">{{ product.price }}</div>
        <div class="col-xs-9  pull-left">{{product.description}}</div>
    </div>
</div>
<div *ngIf="result">
    <h2>No Product found</h2>
</div>

Product.compontent.ts

onSubmit() {
    if (this.formModel.valid) {
        this.submitted = false;
        this.result = false;

        lens id = this.formModel.controls['id'].value;

        this.productService.getProductOne(id)
            .subscribe(product => this.product = product)

        //Check to see if object undefined
        if (this.product) {                
            if (this.product.id != 0)
            {
                this.submitted = true;
            }
            else    
            {
                this.result = true;
            }                
        }
    }
}

產品service.ts

  getProductOne(id: number): Observable<Product> {
      // Parameters obj
      let params: URLSearchParams = new URLSearchParams();
      params.set('id', id.toString());

      //Http request
      return this.http
          .get("api/getProduct", {
              search: params
          })
          .map(response => response.json())
          .catch(handleError);
  }

Web API – ProductController.cs

 [Route("api/getProduct")]
    public Product GetProduct(int id)
    {
        var product = products.FirstOrDefault((p) => p.id == id);

        if (product == null)
        {
            product = new Product();
        }

        return product;
    }

Answer 1

以此方式在Product.compontent.ts中修改onSubmit（） ：

onSubmit() {
        if (this.formModel.valid) {
            this.submitted = false;
            this.result = false;

            lens id = this.formModel.controls['id'].value;

            this.productService.getProductOne(id).subscribe(
                    (product) => {
                     this.product = product;
                        //Check to see if object undefined
                        if (this.product) {                
                            if (this.product.id != 0)
                            {
                                this.submitted = true;
                            }
                            else    
                            {
                                this.result = true;
                            }                
                        }
              });
        }
    }

Answer 2

發生這種情況是因為此product => this.product = product 。 它將product分配給this.product ，但是在該程序執行其他代碼之前，該代碼位於.subscribe(product => this.product = product)

您需要做的就是將observable傳遞給HTML並使用| async獲得值| async | async管道。

Product.compontent.ts

  products: any;
  onSubmit() {
    if (this.formModel.valid) {
      this.submitted = false;
      this.result = false;

      lens id = this.formModel.controls['id'].value;
      this.products = this.productService.getProductOne(id);
    }
  }  

Product.componet.html

<div [hidden]="!(products|async)?.id !=0">
  <h2>Product found</h2>
  <div class="row">
    <div class="col-xs-3">Price</div>
    <div class="col-xs-9  pull-left">Product details</div>
    <div class="col-xs-3">{{(products|async)?.price }}</div>
    <div class="col-xs-9  pull-left">{{(products|async)?.description }}</div>
  </div>
</div>
<div [hidden]="!(products|async)?.id ==0">
  <h2>No Product found</h2>
</div>