Question

我有一个发出HTTP请求的函数。我希望该函数发出请求，在订阅中更改变量的值，然后将变量打印到控制台。

但是，每次打印时，我都会不断获取该变量的原始值。

我调试了代码，发现我的函数执行了两次。

第一次，未执行订阅中的代码，因此console.log(test)打印Output: true。

第二次，subscribe中的代码被执行，但是console.log(test)没有执行。

这是我的代码：

MyComponent.component.ts

private searchTest(value) {
  let test: boolean = true;
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      test = false;
    } else { 
      test = false;
    }
  }, error => {
    test = false;
  });
  console.log(`Output: ${test}`);
}

MyComponent.component.html

<div class="row">
  <div class="col-2"></div>
  <div class="col-8 search-div">
    <mat-form-field class="search-form-field" appearance="outline" [formGroup]="searchForm">
      <mat-label>Search</mat-label>
      <input matInput class="search-input" id="search-input-id" placeholder="Ex: EU030327" formControlName="inputForm" #searchInput>
    </mat-form-field>
    <span matSuffix>
      <button mat-flat-button class="search-btn" color="accent"
        (click)="searchTest(searchInput.value)"><i class="fa fa-search"></i></button>
    </span>
  </div>
  <div class="col-2"></div>
</div>

基本上，我要实现的目标是能够发出HTTP请求并更改变量的值，以便可以在代码的另一部分（例如ngIf）上使用它。

为什么会出现这种情况？
如何让其余代码等待HTTP请求执行？

编辑：

我已经更新了使用回调的函数，所以现在有了这个：

MyComponent.component.ts

teste: boolean = true;

searchTest(value){
  this.test(this.test1, value, this);
}

test(callback, value, self){
  callback(value, self);
}

test1(value, self){
  self.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      self.teste = false;
    } else { 
      self.teste = false;
    }
  }, error => {
    self.teste = false;
  });
}

MyComponent.component.html

<div class="row">
  <div class="col-2"></div>
  <div class="col-8 search-div">
    <mat-form-field class="search-form-field" appearance="outline" [formGroup]="searchForm">
      <mat-label>Search</mat-label>
      <input matInput class="search-input" id="search-input-id" placeholder="Ex: EU030327" formControlName="inputForm" #searchInput>
    </mat-form-field>
    <span matSuffix>
      <button mat-flat-button class="search-btn" color="accent"
        (click)="searchTest(searchInput.value)"><i class="fa fa-search"></i></button>
    </span>
  </div>
  <div class="col-2"></div>
</div>

<p *ngIf="!teste">
  This is the error!
</p>

现在我还有另一个问题... <p>仅在我按下按钮两次或将鼠标指针悬停在其他组件上时才会出现（这对我来说是一种很奇怪的新行为）。 / p>

我的页面有一个带有搜索输入的组件（我目前正在使用该组件）和一个带有显示HTTP响应数据的表的组件。

我的代码有什么问题？

为什么我的API请求没有更新变量？

0 个答案: