Angular 2如何处理异步调用

第一次按下按钮的形式是undefined就是返回，按钮必须点击两次才能返回正确的结果。在结果返回之前我如何不处理。当按钮点击返回正确的结果不是前一个？Angular 2如何处理异步调用

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; 
    }

来源

2017-04-02 mark s

哪里是你的形式？我甚至没有在您的html中看到一个 –

[我如何从angular2中的Observable/http/async调用返回响应？]（http://stackoverflow.com/questions/43055706/how-do- I-返回的响应从 - 一个可观测-HTTP-异步-通话中angular2） – Alex

修改您的onsubmit（）在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; 
          }     
         } 
       }); 
     } 
    }

来源

2017-04-02 06:53:41

这是因为这个product => this.product = product的。其分配到productthis.product，但该程序之前执行它是.subscribe(product => this.product = product)

你需要做的仅仅是通过对观察到的HTML，并得到使用| async pipe.like这个值是什么后，其他代码。

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>

来源

2017-04-02 14:37:20 IsuruAb

Angular 2如何处理异步调用

回答

相关问题