json 2 打字稿映射给出类型错误

Question

Okej 所以我试图通过 Web Api 将 .Net 对象列表映射到我的 Angular 前端 2. 对象被发送，我得到它们，但取决于具体情况对象及其属性可能是 Employment 引用、Assignment 引用或 Assignment 组织单位引用。

这是对象列表的外观图，其中一个 AssignmentHolder 可以是这三个 class 之一，而 DependentEntities 列表可以是这三个 class是的。这是他们在我的 Angular 应用程序中的样子：

这是包含它们的对象：

@JsonObject('AssignmentListItem')
export class AssignmentListItem {
@JsonProperty('AssignmentHolder')
AssignmentHolder: any = undefined;

@JsonProperty('DependentEntities')
DependentEntities: any = undefined;

@JsonProperty('AssignmentRoles', [AssignmentRole])
AssignmentRoles: AssignmentRole[] = undefined;

@JsonProperty('NumberOfDependentEntities', Number)
NumberOfDependentEntities: Number = undefined;

@JsonProperty('IsInherited', Boolean)
IsInherited: boolean = undefined;
}

这些是 classes。

@JsonObject('ReferenceBase')
export class ReferenceBase {

@JsonProperty('OrganizationRegistrationNumber', OrganizationRegistrationNumber)
OrganizationRegistrationNumber: OrganizationRegistrationNumber = undefined;

@JsonProperty('IsIncomplete', Boolean)
IsIncomplete: Boolean = undefined;

@JsonProperty('SortingName', String)
SortingName: string = undefined;
}

-------

@JsonObject('EmploymentReference')
export class EmploymentReference extends ReferenceBase {

@JsonProperty('NationalCivicRegistrationNumber', String)
NationalCivicRegistrationNumber: NationalCivicRegistrationNumber = undefined;

@JsonProperty('GivenName', String)
GivenName: string = undefined;

@JsonProperty('Surname', String)
Surname: string = undefined;

@JsonProperty('FullName', String)
FullName: string = undefined;

constructor() {
    super();
    this.FullName = (this.GivenName + ' ' + this.Surname);
    this.SortingName = this.FullName;
}
}

-----
@JsonObject('AssignmentReference')
export class AssignmentReference extends ReferenceBase {

@JsonProperty('AssignmentRoles', [AssignmentRole])
AssignmentRoles: AssignmentRole[] = undefined;

@JsonProperty('OrganizationName', String)
OrganizationName: string = undefined;

@JsonProperty('NationalCivicRegistrationNumber', NationalCivicRegistrationNumber)
NationalCivicRegistrationNumber: NationalCivicRegistrationNumber = undefined;

@JsonProperty('Surname', String)
Surname: string = undefined;

@JsonProperty('FullName', String)
FullName: string = undefined;

@JsonProperty('GivenName', String)
GivenName: string = undefined;
}

------

@JsonObject('AssignmentOrganizationalUnitReference')
export class AssignmentOrganizationalUnitReference extends ReferenceBase {

@JsonProperty('OrganizationName', String)
OrganizationName: string = undefined;

@JsonProperty('Name', String)
Name: string = undefined;

@JsonProperty('Active', Boolean)
Active: Boolean = undefined;

@JsonProperty('IncludeSubUnits', Boolean)
IncludeSubUnits: Boolean = undefined;

@JsonProperty('AssignmentRoles', [AssignmentRole])
AssignmentRoles: AssignmentRole[] = undefined;

@JsonProperty('UnitId', String)
UnitId: string = undefined;

@JsonProperty('Type', OrganizationalUnitReferenceType)
Type: OrganizationalUnitReferenceType = undefined;
}

所以这些也是我想要映射的对象，具体取决于我返回的分配列表中的内容

这是我的自定义 DTO，因此我可以使用自定义转换器：

@JsonObject('AssignmentsDto')
export class AssignmentsDto {

@JsonProperty('AssignmentList', ObjectConverter)
AssignmentList: AssignmentListItem[] = undefined;
}

这是我的 JsonCustomConverter

@JsonConverter
export class ObjectConverter implements JsonCustomConvert<AssignmentListItem[]> {

// We receive the instance and just serialize it with the standard json2typescript method.
serialize(assignmentListItems: AssignmentListItem[]): any {
    const jsonConvert = new JsonConvert();
    return jsonConvert.serialize(assignmentListItems);
}

// We receive a json object (not string) and decide
// based on the given properties whether we want to
// create an instance of AssignmentReference or AssignmentOrgUnitReference.
deserialize(assignmentListItems: any): AssignmentListItem[] {

    const jsonConvert = new JsonConvert();

    let assignments = new Array<AssignmentListItem>();

    //Map the Holder entity.
    for (let assignment of assignmentListItems) {
        if (assignment.AssignmentHolder['__type'] === 'something.something.Web.Models.EmploymentReference' ||
            assignment.AssignmentHolder['__type'] === 'something.something.Web.Models.AssignmentEmploymentReference') {

            let tempAssignment: AssignmentListItem = jsonConvert.deserialize(assignment.AssignmentHolder, EmploymentReference);

            //For every assignment there is a list of Dependents. Here we map those.
            for (let dependent of assignment.DependentEntities) {
                if (dependent['__type'] === 'something.something.Web.Models.EmploymentReference' ||
                    dependent['__type'] === 'something.something.Web.Models.AssignmentEmploymentReference') {

                    let tempDependent: EmploymentReference = jsonConvert.deserialize(dependent, EmploymentReference);
                    tempAssignment.DependentEntities.push(tempDependent);

                } else if (dependent['__type'] === 'something.something.Web.Models.AssignmentOrganizationalUnitReference') {

                    let tempDependent: AssignmentOrganizationalUnitReference = jsonConvert.deserialize(dependent, AssignmentOrganizationalUnitReference);
                    tempAssignment.DependentEntities.push(tempDependent);
                }
            }

            assignments.push(tempAssignment);

        } else if (assignment.AssignmentHolder['__type'] === 'something.something.Web.Models.AssignmentOrganizationalUnitReference') {

            let tempAssignment: AssignmentListItem = jsonConvert.deserialize(assignment.AssignmentHolder, AssignmentOrganizationalUnitReference);

            //For every assignment there is a list of Dependents. Here we map those.
            for (let dependent of assignment.DependentEntities) {
                if (dependent['__type'] === 'something.something.Web.Models.EmploymentReference' ||
                    dependent['__type'] === 'something.something.Web.Models.AssignmentEmploymentReference') {

                    let tempDependent: EmploymentReference = jsonConvert.deserialize(dependent, EmploymentReference);
                    tempAssignment.DependentEntities.push(tempDependent);

                } else if (dependent['__type'] === 'something.something.Web.Models.AssignmentOrganizationalUnitReference') {

                    let tempDependent: AssignmentOrganizationalUnitReference = jsonConvert.deserialize(dependent, AssignmentOrganizationalUnitReference);
                    tempAssignment.DependentEntities.push(tempDependent);
                }
            }
            assignments.push(tempAssignment);
        }
    }
    console.log('return ', assignments);
    return assignments;
}
}

最后，这是我使用转换器的作业 Api 服务。

    // GET LIST OF ASSIGNMENTS
getAssignmentList(
    filterStr: string,
    orgNoParam: string,
    skip: number,
    take: number
): Observable<any> {

    // set headers
    let head = new HttpHeaders();
    head = head.append('Content-Type', 'application/json'); 
    // set binds to model reciever
    const data = {
        'orgNoParam': orgNoParam,
        'filterStr': filterStr,

    };
    let body = JSON.stringify(data);

    // set query parameters
    let url = this.assignmentListUrl + '?skip=' + skip + '&take=' + take;

    return this.http.post<any>(url, body, { headers: head })
        .map(this.convertData)
        .catch(this.handleError);
}

private convertData(res: Response) {

    let jsonConvert = new JsonConvert();
    jsonConvert.valueCheckingMode = ValueCheckingMode.ALLOW_NULL;

    let deSerializedAssignments: AssignmentListItem[] = jsonConvert.deserialize(res, AssignmentsDto).AssignmentList;

    return deSerializedAssignments;

我在控制台中得到的错误是：

JsonConvert 中出现致命错误。由于类型错误，无法将 JSON 对象映射到 JavaScript class "AssignmentsDto"。 Class 属性：AssignmentList 预期类型：未定义 JSON 属性：AssignmentList JSON 类型：[object, object, object, object, object]

Answer 1

我通过确保 json 对象中的每个属性都被映射到打字稿类并在 AssignmentsDto 中添加了第二个对象属性以及转换器，像这样：

@JsonProperty('AssignmentList',[AssignmentListItem], ObjectConverter) 分配列表：AssignmentListItem[] = undefined;

希望这对某人有所帮助！

json 2 打字稿映射给出类型错误

json 2 typescript mapping gives type error

json

typescript

angular5