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（）：

RewriteEngine on
RewriteRule ^/mylink.php?u=(.*) /mylink/$1 [R=301]

Answer 2

这是因为product => this.product = product。它将product分配到this.product，但在该程序执行.subscribe(product => this.product = product)

之后的其他代码之前

你需要做的就是将observable传递给HTML并使用| async pipe来获取值。就像这样。

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>

Angular 2如何处理异步调用

2 个答案: