angular - TypeError：无法读取未定义的属性“skipTracing”

Question

我看到我的属性未定义，因此我收到此错误，但我不确定我需要在这里修复什么。我想使用 angular 的 *hasPermission 指令，为此我需要我的权限位于命名权限数组中。类似的东西permissions: ['can_read', 'can_write']，我正在尝试初始化我的表单，它必须正确输入。我不确定我到底在哪里犯了错误，非常感谢任何帮助。这是我的代码

export class AddMemberComponent extends AppBaseComponent implements OnInit {
  public activeRoute: string;
  private userId: string;
  private userData: Customer;
  public userDetailsForm: FormGroup;
  public permission: {
    skipTracing: { permissions: [] };
    affiliates: { permissions: [] };
    integrations: { permissions: [] };
  } = null;
  public timeZoneList: TimeZone[] = TIMEZONE;
  public roles = [];
  public isFormLoaded = false;

  constructor(
    private inj: Injector,
    private route: ActivatedRoute,
    private teamService: TeamService
  ) {
    super(inj);
    this.route.url.subscribe((routeParams) => {
      this.activeRoute = routeParams[1].path;
      if (this.activeRoute === 'edit') {
        this.navigationState.breadCrums = [
          new BreadCrumb('Settings', USER_NAVIGATION_LINKS.settings),
          new BreadCrumb('Team', USER_NAVIGATION_LINKS.team),
          new BreadCrumb('Edit'),
        ];
      } else {
        this.navigationState.breadCrums = [
          new BreadCrumb('Settings', USER_NAVIGATION_LINKS.settings),
          new BreadCrumb('Team', USER_NAVIGATION_LINKS.team),
          new BreadCrumb('Add'),
        ];
      }
    });
    this.navigationService.updateNavigationState(this.navigationState);
  }

  /**
   * @ngdoc method
   * @description
   * A lifecycle hook that is called after Angular has
   * initialized all data-bound properties of a directive.
   * @returns void
   */
  public ngOnInit(): void {
    this.route.url.subscribe((routeParams) => {
      this.blockUI.startLoader();
      this.activeRoute = routeParams[1].path;
      if (this.activeRoute === 'edit') {
        this.route.paramMap.subscribe((params) => {
          this.userId = params.get('id');
          this.getUserDetails(this.userId);
        });
      } else {
        this.initForm();
        this.blockUI.stopLoader();
      }
    });
  }

  /**
   * @ngdoc method
   * @description
   * init from with validation
   */
  private initForm() {
    this.userDetailsForm = this.formBuilder.group(
      {
        memberFirstName: [
          '',
          ValidationUtil.requiredNonSpace,
          ValidationUtil.onlyAlphabets,
        ],
        memberLastName: [
          '',
          ValidationUtil.requiredNonSpace,
          ValidationUtil.onlyAlphabets,
        ],
        memberEmail: [
          '',
          [ValidationUtil.requiredNonSpace, ValidationUtil.validateEmail],
        ],
        memberMobileNumber: [
          '',
          [
            ValidationUtil.requiredNonSpace,
            Validators.minLength(10),
            Validators.maxLength(10),
          ],
        ],
        memberPassword: [''],
        memberConfirmPassword: [''],
        timezone: ['', ValidationUtil.requiredNonSpace],
        randomPassword: [true],
        sendEmail: [true],
        isActive: [true],
        selectAll: [false],
        skipTracing: this.initPermissions(
          // Receiving error here
          this.permission.skipTracing.permissions,
          'skipTracing'
        ),
        affiliates: this.initPermissions(
          this.permission.affiliates.permissions,
          'affiliates'
        ),
        integrations: this.initPermissions(
          this.permission.integrations.permissions,
          'integrations'
        ),
      },
      {
        validator: ValidationUtil.MustMatch(
          'memberPassword',
          'memberConfirmPassword'
        ),
      }
    );

    if (this.activeRoute === 'edit') {
      this.prepareFormWithData();
    }

    this.isFormLoaded = true;
  }
}

标签： angulartypescriptangular-reactive-forms

Answer 1

您可以使用空数组初始化权限：

public permission = {
    skipTracing: { permissions: [] },
    affiliates: { permissions: [] },
    integrations: { permissions: [] }
};

或者，您可以在函数调用中使用空数组作为后备值：

skipTracing: this.initPermissions(
  this.permission?.skipTracing.permissions ?? [],
  'skipTracing'
),
affiliates: this.initPermissions(
  this.permission?.affiliates.permissions ?? [],
  'affiliates'
),
integrations: this.initPermissions(
  this.permission?.integrations.permissions ?? [],
  'integrations'
),