Невозможно установить свойство nUserId неопределенной ошибки в angular

Question

Я пытаюсь вызвать один API-интерфейс ReST, когда у меня установлен флажок в форме. Когда я вызываю метод для вызова 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

При использовании Typescript попробуйте использовать модель интерфейса вместо любого (userPermissionObj: any) в качестве типа. Это поможет вам уменьшить количество ошибок такого рода

пример:

interface  UserPermissionObj {
   nUserId: integer,
   name: string
}

userPermissionObj: UserPermissionObj;

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

В this.manageuserService.modifyUserPermissionApiMethod() вы должны передать полученное значение в качестве параметра. Вместо вызова modifyUserPermissionApiMethod () с параметром userObj вы использовали 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 });
        }