Page is not rendering after upgrading Primeng to version 9

Question

After upgrading my project to Angular 9. I've changed used components from Priment from p-dataTable to p-Table as stated in docs of Primeng. Unfortunately now my page is not rendering. In Html

<p-table [value]="popup.assignedUser.selectedList" [scrollable]="true"

this line says that assignedUser is undefined, but in earler version with old Primeng dataTable and angular 6 this was working just fine. What should I change so the code will work the same as before ond Primeng Table? In the ts for this html I've declared

 @ViewChild('popup', {static: false}) popup: UsersPopupComponent;

the popup component looks like:

  @ViewChild('userModal') userModal;
    @ViewChild('assignedUser') assignedUser: AssignedUserTableComponent;
    @ViewChild('assignUser') assignUser;
    type = globals.viewType;
    reportView = false;

    constructor(private reportsComponent: ReportsComponent) {
    }

    openModal(): void {
        this.reportView = true;
        this.userModal.nativeElement.classList.add('open-modal');
    }

    closeModal() {
        this.userModal.nativeElement.classList.remove('open-modal');
    }

    refreshTree() {
        this.assignUser.refreshTree(this.assignUser.treeSelect);

    }

    gatherData() {
        this.reportsComponent.gatherUserIds();
    }

    deleteList() {
        this.assignedUser.selectedList = [];
    }

and selectedList from assignedUser is set in another component AssignedUserTable

 addUser(inputList) {
        if (this.typeService === this.typeInput) {
            inputList.forEach(il => (
                !this.selectedList.find(sl => sl.userId === il.userId)) ?
                this.selectedList.push(il) : {});
            this.emitUser();
            this.selectedList.forEach(user => {
                user._fullName = this.userService.getUserFullNameFromCachedUsers(user.userId);
            });
            this.selectedList.sort((a, b) =>
                a._fullName.substr(a._fullName.indexOf(' ') + 1).localeCompare(b._fullName.substr(b._fullName.indexOf(' ') + 1)));
        }
    }

When does assignedUser is assigned ? Can you post more code here ? — Yesub
I've editted the code, so now all the dependencies should be visible — mario

Yesub Yesub · Accepted Answer · 2020-10-16T12:31:06

Try to add a question mark after assignedUser in your html. Basically the question mark means

if assignedUser !== undefined && assignedUser !== null

<p-table [value]="popup.assignedUser?.selectedList" [scrollable]="true"

If the assigneUser is initiate after the view, the view will have an undefined object. With that trick, it'll wait to have a value to initiate.

Page is not rendering after upgrading Primeng to version 9

1 Answers