how to pass dynamic xpath in protractor and cucumber using typescript

Question

I want to dynamically pass a parameter in my xpath. for page objects I have created a class and it is called in my step definition. please see below

below is my code and the error message

//this is my page object
export class accountPage{

    accountNo: string;
    public accountNumberLabel = element(by.xpath('//span[text()=" '+this.accountNo+' "]'))



    async getAccountNumberLabel(): Promise<string>{
        return await Promise.resolve(this.accountNumberLabel.getText());
    }   
}

//and this is my step definition

const accountpage = new new accountPage();

Then('I assert the row  {string} for {string}',async(account_number, account_value)=>{
    accountpage.accountNo = account_number;
    await browser.sleep(2000);
    if(searchKey.includes("account_number")){
        assert.equal(await accountpage.getAccountNumberLabel(),account_value);
    }
});```

//I am receiving an error 
NoSuchElementError: No element found using locator: By(xpath, //span[text()=" undefined "])

when I read the value console.log(accountpage.accountNo) it is returning correct value

Answer 1

Issue 1 :

`this.accountNo` is undefined. 

Issue 2 :

Use template literals to concatenate strings.

element(by.xpath(`//span[text()='${this.accountNo}']`))

Check you have two spaces in the console. I mean before and after undefined

NoSuchElementError: No element found using locator: By(xpath, //span[text()=" undefined "]