设置属性以触发Typescript类中的方法

Question

I currently trying to setup a property inside my class so that when it is called, it will trigger a method inside that same class to execute. I seem to be getting a lot of errors relating to ... is not a function .

So I Have tried to implement this a different way like below.

So I have setup my class with a lot of properties and a constructor, I have tried to setup a property html that will trigger the method getHTML() to be fired:

export class DocumentTemplateHistoryDto {
Id: string;
Agent: AgentDto;
AgentId: string;
CreatedDate: Date;
Draft: boolean;
EndDate: Date;
HeaderAndFooter: HeaderAndFooterDto;
HeaderAndFooterId: string;
Live: boolean;
StartDate: Date;
DocumentTemplate: DocumentTemplateDto;
DocumentTemplateId: string;
VersionNumber: number;
Pages: PageDto[];
_MergedHTML: string;
html: () => void;

constructor(_Agent: AgentDto, _AgentId: string, _CreatedDate: Date, _Draft: boolean, _EndDate: Date, _HeaderAndFooter: HeaderAndFooterDto, _HeaderAndFooterId: string,
    _Live: boolean, _StartDate: Date, _DocumentTemplate: DocumentTemplateDto, _DocumentTemplateId: string, _VersionNumber: number, _Pages: PageDto[], _Id?: string) {

    this.Agent = _Agent;
    this.AgentId = _AgentId;
    this.CreatedDate = _CreatedDate;
    this.Draft = _Draft;
    this.EndDate = _EndDate;
    this.HeaderAndFooter = _HeaderAndFooter;
    this.HeaderAndFooterId = _HeaderAndFooterId;
    this.Live = _Live;
    this.StartDate = _StartDate;
    this.DocumentTemplate = _DocumentTemplate;
    this.DocumentTemplateId = _DocumentTemplateId;
    this.VersionNumber = _VersionNumber;
    this.Pages = _Pages;
    this.Id = _Id;


}

getHTML() {
    this.Pages.forEach((item) => {
        this._MergedHTML = this._MergedHTML + item.HTML;
    });
}
}

I cannot seem to get the syntax right for this functionality. Could someone help me out please.

Answer 1

There are a few ways to do this, but the ones that immediately come to mind for me are a getter or proxy.

Getters and setters are probably the easiest way to implement what you want, as shown below:

export class DocumentTemplateHistoryDto {

    ...

    public get html(){
        this.Pages.forEach((item) => {
            this._MergedHTML = this._MergedHTML + item.HTML;
        });
    }
}

Then call it:

new DocumentTemplateHistoryDto().html;

---

Alertnatively, you could set up a proxy:

export class DocumentTemplateHistoryDto {

...

public htmlProxy = new Proxy ({
    get: (obj, prop) => {
        if(prop === 'html')
            this.Pages.forEach((item) => {
                this._MergedHTML = this._MergedHTML + item.HTML;
            });
      return true;
    }
}); 

Then call it:

new DocumentTemplateHistoryDto().htmlProxy.html;