Question

我有一个搜索字段，该字段接收一些要搜索的值并填充一个数组。如果用户提供的值无效，则将布尔值设置为true，显示错误消息，并且输入的轮廓颜色变为红色。

我有一个函数，该函数接收提供的值并发出HTTP get请求。在.subscribe()函数内部，我更新了错误消息，并将输入的轮廓颜色更改为红色。

我搜索了类似的问题，发现大多数情况下涉及的人员没有更新订阅中的变量，但是我的代码不是这种情况。

MyComponent.component.ts

constructor(public rest: RestService) { }

private onCreateNewRequest(value: any) {
  let message = "Required!";
  if (value === undefined || value === "" || value.length < 0) {
    this.setErrorMessage(message);
    this.setIsFormInvalid(true);
    this.setNewRequestInputInvalid()
  } else {
    this.getOrderByNumber(this.setNewRequestInputInvalid, value);
  }
}

private getOrderByNumber(callback, value: string) {
  let message = "Invalid Order!";
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.onCreateReturn(orderNrData);
    } else {
      callback();
      this.setErrorMessage(message);
      this.setIsFormInvalid(true);
    }
  }, error => {
    callback();
    this.setErrorMessage(message);
    this.setIsFormInvalid(true);
  });
}

private setErrorMessage(message: string) {
  this.errorMessage = message;
}

private setIsFormInvalid(status: boolean) {
  this.isFormInvalid = status;
}

private setNewRequestInputInvalid() {
  document.getElementById('new-request-input-id').style['border-color'] = 'red';
}

MyComponent.component.html

<div class="row">
  <div class="col-2 d-flex align-items-center">Order: </div>
  <div class="col-8">
    <input class="form-control align-middle new-request-input-class" id="new-request-input-id" type="text" placeholder="Ex: EU030327" aria-label="Search" (input)="resetValidator()" (keyup.enter)="onCreateNewRequest(searchInput.value)" #searchInput>
  </div>
  <div class="col-2"></div>
</div>

<div class="row">
  <div class="col-2"></div>
  <div class="col-8 error-label-col" id="error-label-id" *ngIf="isFormInvalid">
    <small>{{getErrorMessage()}}</small>
  </div>
</div>

Rest.service.ts

private extractData(res: Response) {
  let body = res;
  return body || {};
}

getOrderByNumber(order_nr): Observable<any> {
  return this.http.get(endpoint + 'orders/number/' + order_nr, httpOptions).pipe(
            map(this.extractData));
}

我的代码成功地将输入的轮廓颜色更改为红色，但是以某种方式未能将isFormInvalid更改为true。因此，*ngIf不会触发，消息也永远不会显示给用户。

编辑：

如果我在更改ChangeDetectorRef之后使用isFormInvalid，一切都会按预期进行...

constructor(private ref: ChangeDetectorRef) { }

private getOrderByNumber(callback, value: string) {
  let message = "Invalid Order!";
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.onCreateReturn(orderNrData);
    } else {
      callback();
      this.setErrorMessage(message);
      this.setIsFormInvalid(true);
      this.ref.detectChanges(); // here
    }
  }, error => {
    callback();
    this.setErrorMessage(message);
    this.setIsFormInvalid(true);
    this.ref.detectChanges(); // here
  });
}

为什么当我强迫Angular检测到这些变化时才检测到这些变化？还有，这是个好习惯吗？

为什么HTTP get请求执行后HTML不更新？

0 个答案: