Javascript http get请求状态返回404时显示角度材质垫错误

我很难找到一个方法来做这件事。如果http get请求失败（状态=404），我想在输入表单上显示mat错误

我有一个搜索表单，每次用户搜索不存在的东西时，我都要显示mat错误，告诉用户他的搜索无效

以下是我的客户端代码：

rest.service.ts

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

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

getReturns(): Observable<any> {
  return this.http.get(endpoint + 'returns', httpOptions).pipe(
    map(this.extractData));
}

MyComponent.component.html

<div class="row">
  <div class="col-2"></div>
  <div class="col-8">
    <mat-form-field class="search-form-field" appearance="outline">
      <mat-label>Search</mat-label>
      <input matInput class="search-input" placeholder="Search" [formControl]="inputForm" #searchInput>
      <mat-error *ngIf="inputForm?.invalid">{{ getErrorMessage() }}</mat-error>
      <mat-hint>Insert an order ID.</mat-hint>
    </mat-form-field>
    <span matSuffix>
      <button mat-raised-button class="search-btn" color="accent" [disabled]="inputForm?.invalid" (click)="getReturnByOrderId(searchInput.value)"><i class="fa fa-search"></i></button>
    </span>
  </div>
  <div class="col-2"></div>
</div>

搜寻
{{getErrorMessage（）}}
插入订单ID。

我不确定我的服务器端代码是否有用，如果有人需要，我会编辑我的问题

---

对我如何实现这一目标有什么建议吗？谢谢你的帮助

当服务器返回404状态代码时，在这种情况下，您的订阅块将不会执行。所以您需要编写错误块，在这里您可以处理404错误并将表单设置为无效，如下所示

getReturnByOrderId(value) {
  if (value.length > 0) {
    this.rest.getOrder(value).subscribe((data: {}) => {
      if (Object.entries(data).length !== 0) {
        this.openDialog(data);
      } else {
         // if data is empty show 
        this.inputForm.setErrors({ 'invalid': true });
      }
    }, error => {
        //when 404 error 
        this.inputForm.setErrors({ 'invalid': true });

    });
  } else {
    this.rest.getReturns().subscribe((data: {}) => {
      this.returns = data;
    });
  }
}

---

希望这会有帮助

你需要写一个错误块来处理404响应我很高兴，我可以帮忙！

getReturnByOrderId(value) {
  if (value.length > 0) {
    this.rest.getOrder(value).subscribe((data: {}) => {
      if (Object.entries(data).length !== 0) {
        this.openDialog(data);
      } else {
         // if data is empty show 
        this.inputForm.setErrors({ 'invalid': true });
      }
    }, error => {
        //when 404 error 
        this.inputForm.setErrors({ 'invalid': true });

    });
  } else {
    this.rest.getReturns().subscribe((data: {}) => {
      this.returns = data;
    });
  }
}