Base solution for your next web application
Open Closed

Error - Property 'id' does not exist on type 'PersonListDto' #7093


User avatar
0
adudley created

Hello, I am currently attempting to complete the PhoneBook tutorial (Core + Angular) using the single project on VS 2017. I’m hitting a problem at the point where I have to delete a Person and the problem seems to be that the client and server are not in sync.

I have gone through my code twice and even compared it to the github demo. Everything is the same but I receive the error:

TS2339 (TS) Property 'id' does not exist on type 'PersonListDto'.

Which is occurring at phonebook.component.ts:

deletePerson(person: PersonListDto): void {
        this.message.confirm(
            this.l('AreYouSureToDeleteThePerson', person.name),
            isConfirmed => {
                if (isConfirmed) {
                    this._personService.deletePerson(person.id).subscribe(() => {
                        this.notify.info(this.l('SuccessfullyDeleted'));
                        _.remove(this.people, person);
                    });
                }
            }
        );
    }

If I look at service-proxies.ts, PersonListDto does not contain an ‘id’ attribute. It looks like this:

export class PersonListDto implements IPersonListDto {
    name!: string | undefined;
    surname!: string | undefined;
    emailAddress!: string | undefined;

    constructor(data?: IPersonListDto) {
        if (data) {
            for (var property in data) {
                if (data.hasOwnProperty(property))
                    (<any>this)[property] = (<any>data)[property];
            }
        }
    }

    init(data?: any) {
        if (data) {
            this.name = data["name"];
            this.surname = data["surname"];
            this.emailAddress = data["emailAddress"];
        }
    }

    static fromJS(data: any): PersonListDto {
        data = typeof data === 'object' ? data : {};
        let result = new PersonListDto();
        result.init(data);
        return result;
    }

    toJSON(data?: any) {
        data = typeof data === 'object' ? data : {};
        data["name"] = this.name;
        data["surname"] = this.surname;
        data["emailAddress"] = this.emailAddress;
        return data; 
    }
}

I ran refresh.bat successfully after restarting the server side project as the demo explains and deleting the person on the client side works just fine. Is the refresh.bat file not updating correctly?


2 Answer(s)
  • User Avatar
    0
    adudley created

    Ugh, I found the problem. The (video) tutorial missed out that the PersonListDto class must inherit from FullAuditedEntityDto in order to access the id.

    The video tutorial skips this very important step, however the written tutorial does have the correct code.

    The video tutorial is a little bit problematic, for instance tutorial 36 has been incorrectly edited with another video (42?) which also led to a lot of confusion. I would advise sticking to the written tutorial for now.

  • User Avatar
    0
    maliming created
    Support Team

    Does your PersonListDto class inherit the FullAuditedEntityDto class?