Question

我有一个带有简单服务的角度组件，该组件根据碰巧是枚举的参数提取一些数据。

export enum AgeEnum {
    UNDER_18 = 'UNDER_18',
    ABOVE_18 = 'ABOVE_18'
}

然后在我的组件中具有以下内容：

private ageArray = Object.keys(AgeEnum);

private restrictionsWrapper: RestrictionsWrapper;

constructor(private restrictionsService: RestrictionsService) {
}

ngOnInit(): void {
    this.getRestrictionsForAge(this.ageArray);
}

private getRestrictionsForAge(ages: string[]) {
    for (const age of ages) {
        this.restrictionsService.getRestrictions(age as AgeEnum)
            .subscribe((options) => {
                    this.restrictionsWrapper.restrictions = options.restrictions;
                }, () => {
                    this.restrictionsWrapper.restrictions = null;
                }
            );
    }
}

我的UI服务如下：

getRestrictions(age: AgeEnum): Observable<RestrictionsWrapper> {
    const params = new HttpParams().set('age', age);
    return this.http.get<RestrictionsWrapper>(BackendRoute.RESTRICTIONS, {params: params});
}

这是我的RestrictionsWrapper模型：

export interface RestrictionsWrapper {
    restrictionDocuments: string[];
    blocked: boolean;
}

所以基本上，基于年龄，我想加载另一组“限制”。但是我不想有两个单独的方法，我为每个方法传递两个不同的ENUM值。我遇到错误：

Unhandled error occured. TypeError: Cannot set property 'restrictions' of undefined

知道我在做什么错吗？这实际上是正确的（或良好做法）this.restrictionsService.getRestrictions(age as AgeEnum)吗？

Answer 1

添加

restrictionsWrapper = new RestrictionsWrapper();

在控制器的构造函数或ngOnInit（）内部或在getRestrictionsForAge（）方法内部。

发生此错误是因为您在实例化limitsWrapper之前尝试对其进行初始化

Answer 2

这是您的问题，您的RestrictionsWrapper是一个接口。接口仅描述值和函数，需要实现类，但不是对象。

您的错误消息TypeError: Cannot set property 'restrictions' of undefined试图告诉您您正在尝试执行以下操作：undefined.restrictions = VALUE。

要解决您的问题，您可以选择以下两个选项：

第一

// Initialise your variable with an empty object
private restrictionsWrapper: RestrictionsWrapper = {};

第二：

在您的组件中：

private restrictionsWrapper: RestrictionsWrapperClass;

constructor(private restrictionsService: RestrictionsService) {
    this.restrictionsWrapper = new RestrictionsWrapperClass();
}

例如restriction.api.ts。

export class RestrictionsWrapperClass implements RestrictionsWrapper {

    restrictionDocuments: string[];
    blocked: boolean;

    constructor() {
        // Don't know, set some default values if you want
        this.restrictionDocuments = [];
        this.blocked = false;
    }

}

TypeScript从Enum创建数组，然后将其用作服务调用的参数

2 个答案: