无法将类型“Observable<{ orderNumber: string; }[]>”分配给类型“Observable<OrdersValidation>”

Question

我是 Angular2/TypeScript 的新手，所以如果我犯了一些错误，请原谅。 我正在尝试将 http POST 请求的结果映射到接口。

这是我的代码：

• 我的组件：

   type StatePanel = 'success' | 'failed';
  
   @Component({
     selector: 'nico-order-validation',
     standalone: true,
     imports: [AsyncPipe,MatProgressSpinnerModule,FormsModule],
     templateUrl: './order-validation.component.html',
     styleUrl: './order-validation.component.css'
   })
   export class OrderValidationComponent {
     private readonly orderService = inject(OrderValidationService)
     private _snackBar = inject(MatSnackBar)
  
     @Input() orderInput: string = 'DEV-109522'
  
     data: any;
     isSaving = signal(false)
  
     openSnack(message: string, cssClass: StatePanel) {
         const snackConfig: MatSnackBarConfig = {
           duration: 5000,
           verticalPosition: 'bottom',
           panelClass: cssClass
         };      
         this._snackBar.open(message, '', snackConfig)
     }
  
     items$ = this.orderService.getOrderByNumber(this.orderInput);
  
   }
  

我的服务：

type OneOrderApiReturn = {
  id: number,
  orderId: string,
  orderNumber: string,
  contactId: string,
  contactEmail: string,
  code: number,
  dategen: Date,
  dateval: Date
}

type OrderApiReturn = {
  results: OneOrderApiReturn[]
}
@Injectable({
  providedIn: 'root'
})
export class OrderValidationService {
  private readonly http = inject(HttpClient);
  private url = environment.url;

  getOrderByNumber(orderNumber: string): Observable<OrdersValidation> {
    orderNumber = orderNumber.trim();
    const options = orderNumber ? { params: new HttpParams().set('orderNumber', orderNumber) } : {};

    // The error is on the return:
    return this.http.post<OrderApiReturn>( this.url + environment.getOrderByNumber, options )
      .pipe(
        map(returnApi => {
          return returnApi.results.map(item => ({ orderNumber: `${item.orderNumber}` }))
        })
    );
  }

我的界面：

export interface OrderValidation {
    id: number
    orderId: string;
    orderNumber: string;
    contactId: string;
    contactEmail: string;
    code: number;
    dategen: Date;
    dateval: Date
}

export type OrdersValidation = OrderValidation[]; //alias

我的服务在 getOrderByNumber 返回行上出现以下错误：

无法将类型“Observable<{ orderNumber: string; }[]>”分配给类型“Observable”。 无法分配类型 '{ orderNumber: string; }[]' 输入“OrdersValidation”。 类型 '{ orderNumber: string; }' 不具有“OrderValidation”类型的以下属性：id、orderId、contactId、contactEmail 和 3 个 other.ts(2322)

我错过了什么？

Answer 1

如抛出的错误所述：

在

getOrderByNumber

返回线上出现以下错误：

无法将类型

Observable<{ orderNumber: string; }[]>

分配给类型

Observable

。

函数

getOrderByNumber

正在执行以下操作：

return returnApi.results.map(item => ({ orderNumber: `${item.orderNumber}` }))

因此返回原始对象被仅具有

orderNumber

属性的新对象替换的结果...这样做违反了

Observable<OrdersValidation>

给出的类型约束

为了使该行有意义，您应该使用

return returnApi.results.filter(item => item.orderNumber === orderNumber);

不会更改返回列表中包含的对象，而只会 filter 列表仅返回

OrdersValidation

与条件匹配的子集，其中

orderNumber

是预期的。

到目前为止所说的是解决类型验证...但我仍然没有完全理解那里的意图语义..因为从调用者那里你称这些为

items

，尽管我希望它是单数的，因为有多少订单有相同的id吗？