Angular 2, wie mit asynchronen Aufrufen umzugehen ist

Question

Erstmalige Schaltfläche wird in Form angeklickt, undefined ist zurück, Schaltfläche muss zweimal geklickt werden, um korrektes Ergebnis zurückzugeben. Wie verarbeite ich nicht, bis das Ergebnis zurückkommt? Wenn die Schaltfläche geklickt wurde, geben Sie das korrekte Ergebnis und nicht das vorherige zurück.

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

Produkt-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

Ändern Sie bitte Ihre onSubmit() in Product.compontent.ts auf diese Weise:

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

Dies geschieht, weil dieser product => this.product = product. Es zuweisen product in this.product, aber bevor das Programm ausführt, andere Codes, die nach dem .subscribe(product => this.product = product)

sind, was Sie tun müssen, ist nur die beobachtbare zu HTML geben und Werte mit | async pipe.like diese.

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>