Question

我有一个http服务，用于从后端获取数据以显示在前端的材料字段中。

controler.ts

import { Job } from '../models/job.model'; //this is my interface model

export class JobComponent {

  public jobData = <Job>{};
  public data$: Observable<Job>;


  // getJobs is a simple method that make a http request to the backend
  this.data$ = this.serviceJob.getJobs(jobId).pipe(
            catchError(error => {
                console.error('Error loading job data: ', error.message);
                return of(this.jobData); // Return a Empty observable when error
            })
  );
}

view.html

<mat-card *ngIf="(data | async) as data ">
...
  <mat-form-field>
    <mat-label>DBE</mat-label>
    <input matInput [value]="data.dbe" disabled />
  </mat-form-field>
...
</matcard>

当data$返回空的{}时，字段DBE显示Undefined。我想保持显示该字段，但值为空。后端找不到数据或发生异常时，将发生空的data$。

我正在寻找避免在每个字段中添加丑陋的|| null"的最佳方法。如果后端向我返回了一个<Job>的空对象，则确实解决了我的问题。但是很遗憾，我无法更改后端，这是您在找不到任何数据时的默认行为。

是否有解决此问题的最佳方法？

Answer 1

您可以通过在管道中添加map()来操纵从API获取的数据。

  this.data$ = this.serviceJob.getJobs(jobId).pipe(
            map(job => {
               return job || { dbe: '' } as Job;
            }),
            catchError(error => {
                console.error('Error loading job data: ', error.message);
                return of(this.jobData); // Return a Empty observable when error
            })
  );

因此，如果API返回的值是虚假值，它将通过具有空dbe属性的作业对象传递

后端不返回数据时显示空白字段

1 个答案: