Question

我尝试在表单复选框切换时调用一个ReST API。当我调用方法调用api时，出现类似

的错误

Cannot set property 'nUserId' of undefined at

我的html文件包含以下代码，

<div>
  <button mat-raised-button color="primary" (click)="getUserPermisionsByUsernameSearch()">
    Search</button>
</div>
<br /> <br><br />
<div *ngIf="userPermissionObj">
  <div><label for="pl">Permission Level:</label> {{userPermissionObj.sPermLevel}} </div>
  <label for="pm">Permissions:</label>
  <div *ngFor="let pt of permissionType">
    <label>
      <input type="checkbox" [value]="pt.id" [checked]="userPermissionObj.sPermissionType == pt.name ? true : false"
        (change)="updateUserPermisionsByUsername(userPermissionObj,pt)" />
      {{pt.name}} -- {{userPermissionObj.nUserId}}
    </label>

我的ts文件包含以下代码，

export class ModifyuserpermissionsComponent implements OnInit {
    selectedUser: string;
    selectedInstitution: string;
    filtertext: string;
    public status: boolean = false;
    public data = new Array();

    institutionalUsers: any;
    userNameDetails: any;
    userPermissionObj: any;
    permissionRequestUser: any;
    modificationObj: any;
    userObj: any;
    permision: any;


    dataSource = new MatTableDataSource();
    selection = new SelectionModel<Element>(true, []);
    displayedColumns = ['UserId', 'PermissionId', 'PermissionLevel', 'PermissionType'];


    constructor(public dialog: MatDialog,
        public manageuserService: ManageuserService) { }

    ngOnInit() {

        this.manageuserService.loadUserListApiMethod()
            .subscribe((data: any) => { this.institutionalUsers = data });
    }
    loadUserForSearchPermission(event: any, obj: any) {
        if (event.isUserInput) {
            this.permissionRequestUser = obj.sUsername;
        }
    }

    permissionType = [
        { id: 1, name: 'R' },
        { id: 2, name: 'W' }
    ];

    getUserPermisionsByUsernameSearch() {
        var param: string = this.permissionRequestUser;
        this.manageuserService.getUserPermissionApiMethod(param)
            .subscribe((data: any) => { this.userPermissionObj = data });
    }

    updateUserPermisionsByUsername(userObj, permision) {
        this.modificationObj.nUserId = userObj.nUserId;
        this.modificationObj.name = permision.name;
        this.manageuserService.modifyUserPermissionApiMethod(this.userObj)
            .subscribe((data: any) => { this.institutionalUsers = data });
    }

}

有人可以在这里找到我错误的实现方式吗？

Answer 1

您初始化了modificationObj吗？

您正在尝试设置undefined对象的属性。它应该如下所示：

updateUserPermisionsByUsername(userObj, permision) {
  // this.modificationObj.nUserId = userObj.nUserId;
  // this.modificationObj.name = permision.name;

  this.modificationObj = {
    nUserId: userObj.nUserId,
    name: permision.name
  }
}

Answer 2

您的userPermissionObj属性仅在您单击搜索按钮时被初始化。

Answer 3

在this.manageuserService.modifyUserPermissionApiMethod()中，您必须传递作为参数获取的值。您没有使用参数userObj调用ModifyUserPermissionApiMethod（），而是使用了this.userObj。通过删除this.

尝试相同的代码

updateUserPermisionsByUsername(userObj, permision) {
            this.modificationObj.nUserId = userObj.nUserId;
            this.modificationObj.name = permision.name;
            this.manageuserService.modifyUserPermissionApiMethod(userObj)
                .subscribe((data: any) => { this.institutionalUsers = data });
        }

Answer 4

您正在尝试将对象属性设置为undefined属性。您需要先初始化对象，然后才能添加或修改它的属性。

执行此操作的方法有很多，但这是其中两种。

第一：

export class ModifyuserpermissionsComponent implements OnInit {
    selectedUser: string;
    selectedInstitution: string;
    filtertext: string;
    public status: boolean = false;
    public data = new Array();

    institutionalUsers: any;
    userNameDetails: any;
    userPermissionObj: any;
    permissionRequestUser: any;
    modificationObj: any = {}; // <-- we have initialized an empty object
    userObj: any;
    permision: any;


    dataSource = new MatTableDataSource();
    selection = new SelectionModel<Element>(true, []);
    displayedColumns = ['UserId', 'PermissionId', 'PermissionLevel', 'PermissionType'];


    constructor(public dialog: MatDialog,
        public manageuserService: ManageuserService) { }

    ngOnInit() {

        this.manageuserService.loadUserListApiMethod()
            .subscribe((data: any) => { this.institutionalUsers = data });
    }
    loadUserForSearchPermission(event: any, obj: any) {
        if (event.isUserInput) {
            this.permissionRequestUser = obj.sUsername;
        }
    }

    permissionType = [
        { id: 1, name: 'R' },
        { id: 2, name: 'W' }
    ];

    getUserPermisionsByUsernameSearch() {
        var param: string = this.permissionRequestUser;
        this.manageuserService.getUserPermissionApiMethod(param)
            .subscribe((data: any) => { this.userPermissionObj = data });
    }

    updateUserPermisionsByUsername(userObj, permision) {
        // now you can set properties to modificationObj
        this.modificationObj.nUserId = userObj.nUserId;
        this.modificationObj.name = permision.name;
        this.manageuserService.modifyUserPermissionApiMethod(this.userObj)
            .subscribe((data: any) => { this.institutionalUsers = data });
    }

}

或第二种方式

export class ModifyuserpermissionsComponent implements OnInit {
    selectedUser: string;
    selectedInstitution: string;
    filtertext: string;
    public status: boolean = false;
    public data = new Array();

    institutionalUsers: any;
    userNameDetails: any;
    userPermissionObj: any;
    permissionRequestUser: any;
    modificationObj: any;
    userObj: any;
    permision: any;


    dataSource = new MatTableDataSource();
    selection = new SelectionModel<Element>(true, []);
    displayedColumns = ['UserId', 'PermissionId', 'PermissionLevel', 'PermissionType'];


    constructor(public dialog: MatDialog,
        public manageuserService: ManageuserService) { }

    ngOnInit() {

        this.manageuserService.loadUserListApiMethod()
            .subscribe((data: any) => { this.institutionalUsers = data });
    }
    loadUserForSearchPermission(event: any, obj: any) {
        if (event.isUserInput) {
            this.permissionRequestUser = obj.sUsername;
        }
    }

    permissionType = [
        { id: 1, name: 'R' },
        { id: 2, name: 'W' }
    ];

    getUserPermisionsByUsernameSearch() {
        var param: string = this.permissionRequestUser;
        this.manageuserService.getUserPermissionApiMethod(param)
            .subscribe((data: any) => { this.userPermissionObj = data });
    }

    updateUserPermisionsByUsername(userObj, permision) {
        this.modificationObj = {} // you can initialize your object here
        
        // or maybe
        // this.modificationObj = { 
        //   nUserId: userObj.nUserId,
        //   name: permission.name
        // } 

        this.modificationObj.nUserId = userObj.nUserId;
        this.modificationObj.name = permision.name;
        this.manageuserService.modifyUserPermissionApiMethod(this.userObj)
            .subscribe((data: any) => { this.institutionalUsers = data });
    }

}

Answer 5

使用Typescript时，请尝试使用接口模型而不是任何（userPermissionObj: any）作为类型。这将帮助您减少此类错误

示例：

interface  UserPermissionObj {
   nUserId: integer,
   name: string
}

userPermissionObj: UserPermissionObj;

无法设置角度未定义错误的属性“ nUserId”

5 个答案: