LWC wire function

Question

I want to display some value using button click. I have written a simple js and apex. I don't see any error in console but the data is not displaying. Can anyone tell me what is wrong with my code.

apex:

public with sharing class DisplayData {
    @AuraEnabled(cacheable=true)
    public static Account displayAccRec(Id recordId)
    {
        System.debug('*** arg value'+recordId);
        return [SELECT Id, Name from Account where Id = :recordId];
    }
}

JS:

import { LightningElement, wire, track } from 'lwc';
import dispAccRec from '@salesforce/apex/DisplayData.displayAccRec';

export default class DispalyData extends LightningElement {
    @track accRec;
    @track recordId;
    DisplayAccRec;
    @wire(dispAccRec,{recordId:'$recordId'}) DisplayAccRec;
    handleClick(event)
    {
        alert('You clicked the button');
        accRec = DisplayAccRec;
    }
}

HTML:

<template>
    <lightning-card title='Account Record Display'>
        <lightning-button variant="brand" label="Display Data" 
            onclick={handleClick} 
            class="slds-m-left_x-small"
            slot="actions">
        </lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={accRec}>
                <template for:each={accRec.data} for:item="accountInfo">
                    <p key={accountInfo.id}>{accountInfo.Name}</p>
                </template> 
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>

Output:

Answer 1

The parameter name that you specify in the @wire must match the parameter name that the apex method is accepting. Whereas your Apex method is accepting a accId but your @wire is sending RecordId.

Answer 2

As you haven't use LDS to retrieve the record, the Flexi Page(Account Record page) can't provide the recordId to your web component.

here is a solution using LDS:

HTML, you don't need a for:each as it is a single object

<template>
    <lightning-card title='Account Record Display'>
        <lightning-button variant="brand" label="Display Data" 
            onclick={handleClick} 
            class=""
            slot="actions">
        </lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={displayAccRec.data}>
                <p>{name}</p>
            </template>
            <template if:true={displayAccRec.error}>
                {displayAccRec.error} 
            </template>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement, track, wire, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

const fields = [
    NAME_FIELD
]

export default class ShowRecord extends LightningElement {
    @track name;
    @api recordId;

    @wire(getRecord, {recordId: '$recordId', fields}) displayAccRec;

    handleClick() {
        this.name = getFieldValue(this.displayAccRec.data, NAME_FIELD);
        console.log(JSON.stringify(this.displayAccRec))
    }
}

config file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showRecord">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Hope that helps

Answer 3

Do the following changes : (I have added ** where i have made changes)

Apex -

public with sharing class DisplayData {
    @AuraEnabled(cacheable=true)
    **public static List<Account> displayAccRec(String recordId)**
    {
        return [SELECT Id, Name from Account where Id = :recordId];
    }
}

JS -

import { LightningElement, wire, track } from 'lwc';
import dispAccRec from '@salesforce/apex/DisplayData.displayAccRec';

export default class DispalyData extends LightningElement {
    @track accRec;
    **@api recordId;**
    DisplayAccRec;
    @wire(dispAccRec,{recordId:'$recordId'}) DisplayAccRec;
    handleClick(event)
    {
        alert('You clicked the button');
        accRec = DisplayAccRec;
    }
}

HTML -

<template>
    <lightning-card title='Account Record Display'>
        <lightning-button variant="brand" label="Display Data" 
            onclick={handleClick} 
            class="slds-m-left_x-small"
            slot="actions">
        </lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={accRec}>
                <template for:each={accRec.data} for:item="accountInfo">
                    <p key={accountInfo.id}>{accountInfo.Name}</p>
                </template> 
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>

Tell me if this works or not , I will help further.