Question

我有下面显示的代码。当我尝试设置从服务返回的数据（assetGroup变量）时，所设置的值为null。我最好的选择是因为不是所有嵌套数组都被键入，并且需要被映射。所以我的问题有两个，这是为什么在设置对象后对象继续为null的原因吗？如果是的话，您能以某种方式进行深度映射的分配还是什么是最佳方法？

export class Asset {
    constructor(obj: any) {
        Object.assign({}, obj);
    }
    assetId:number;
    assetSubGroupId:number;
    code: number;
    name: string;
}

export class AssetGroup {

    constructor(obj: any) {
        Object.assign(this, obj);
     }
    assetGroupId:number;
    code: number;
    name: string;
    assetSubGroupList:Asset[];   
}

export class AssetSubGroup {

    constructor(obj: any) {
        Object.assign(this, obj);
     }
    assetSubGroupId:number;
    assetGroupId:number;
    code: number;
    name: string;
    assetList: Asset[];   
}

这是我的服务

getAssetGroup(id:number):Observable<AssetGroup>{
    var url = `http://xxx.azurewebsites.net/api/assetgroups/${id}`;
    return  this.httpClient.get<AssetGroup>(url).pipe(map(x => new AssetGroup(x)));    
  }

我的组件

private  assetGroup:  AssetGroup;

loadAssets(id)
{   
  this.apiService.getAssetGroup(id).subscribe((data) => {
    this.assetGroup  =  data;      
    console.log(this.assetGroup);  // <---- assetGroup is NULL?
  });
}

调试器：

Answer 1

是的，您需要将响应显式映射到您的班级。 Typescript中的泛型仅能确保您不尝试访问不存在的任何属性，但是HttpClient不会为您创建类的实例。有关更多信息，请查看github上的讨论：https://github.com/angular/angular/issues/20770

为了使您能够使用它，您有两个选择：

目前，您的类仅可以转移到接口中，因为它们没有任何功能，而仅描述必须存在属性的协定。因此，您的示例是实际上仅使用接口的完美方案。有关此内容的更多信息，请访问以下链接：https://medium.com/front-end-hacking/typescript-class-vs-interface-99c0ae1c2136
如果您确实需要将类型作为类，则必须显式创建它们的实例。

您将需要编写如下内容：

export class AssetGroup {

    constructor(obj: any) {
        assetGroupId = obj.assetGroupId
        code = obj.code;
        name = obj.name;
        assetSubGroupList = any.assetSubGroupList.map(
            asset => new Asset(asset)
        );
    }

    assetGroupId:number;
    code: number;
    name: string;
    assetSubGroupList:Asset[];

}

您的代码不起作用，因为Object.assign在将Asset的对象与Asset类型的对象合并时不返回对象类型any，因此不知道什么输出类型可以描述为。

设置类型的对象保持为空-Object.Assign？

1 个答案: