可观察的在返回数据时不引用接口

Question

所以我正在做一个管理系统项目，我试图从后端接收数据。我创建了一个服务类，返回的可观察量可以很好地传递给另一个组件。现在，当我尝试使接口仅接收我在接口中指定的数据时，可观察量不会引用它。我的意思是说返回的数据是一个对象，但即使在可观察的返回类型中传递任何数据类型(如number[])也可以。我在这里没有找到问题，请帮忙。 我正在添加一些代码和输出以供参考。

家组件.ts

import { AssetDetailService } from '../asset-detail.service';
constructor(private _assetDetailService:AssetDetailService) { }
ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id')!;
if(id!=null)
this._assetDetailService.getSingleAssetData(id).subscribe(data=>console.log(data));

asset-detail.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { IAssetDetail } from './asset-detail';
@Injectable({
providedIn: 'root'
})
export class AssetDetailService {
private _url:string="http://localhost:25160/api/assets";
constructor(private http:HttpClient) { }
getSingleAssetData(id:string):Observable<IAssetDetail>{
let modifiedUrl = `${this._url}/${id}`;
return this.http.get<IAssetDetail>(modifiedUrl);
}
}

asset-detail.ts 接口

export interface IAssetDetail {
projectName:string,
assetCategory:string,
manufacturer:string,
assetName:string,
description:string,
mlfb:string,
workingCondition:string,
remark:string 
}

我正在接收的输出

category: "category 1"
currentUserEmail: "[e-mail]"
description: "Asset Description"
id: "68eb6877-0bf0-45fb-bdf9-d84fb9ec889f"
invoiceNumber: "2989"
invoiceReceiveDate: "0001-01-01T00:00:00"
ipAddress: "Asset IP Address"
location: "Asset Name"
manufacturer: "Asset Manufacturer"
mlfb: "Asset Mlfb"
name: "Asset Name"
owner: "ABC"
poNumber: "2823"
projectName: "projectId"
remarks: "remarks"
serialNumber: 8796
supportComm: "Asset Support"
workingCondition: "Yes"

如您所见，界面中定义的大多数变量都与输出不匹配，但应用程序仍在工作。我既没有收到任何错误，也没有因为在接口中声明变量，也没有得到想要的结果。 如果您对这个问题有任何疑问，请询问，我将尽力解释。 谢谢

Answer 1

Typescript 中的interfaces是数据的蓝图。它们是某种指导方针，而不是数据应该如何来的规则。

最终，您的代码会被转译为不了解接口的javascript。因此，后端可能返回的任何额外字段都不会从响应中过滤。

接口是 TS 功能，用于使自动完成等功能正常工作。 如果要删除不需要的数据，请使用map运算符

getSingleAssetData(id:string):Observable<IAssetDetail>{
let modifiedUrl = `${this._url}/${id}`;
return this.http.get<IAssetDetail>(modifiedUrl).pipe(map(data=>{
return {
projectName: data.projectName,
assetCategory: data.assetCategory,
manufacturer: data.manufacturer,
assetName: data.assetName,
description: data.description,
mlfb: data.mlfb,
workingCondition: data.workingCondition,
remark: data.remark,
}
}));
}