lwc wrapper class

Question

I'm working on some more LWC learning - trying to understand how a custom wrapper class is displayed in the component.

If I have this APEX, .js, and HTML - the value of field1 is never displayed - can anyone see my issue?

Thanks!

APEX:

    @AuraEnabled(cacheable=true)
public static wrapperClass  rtnWrapperClass(){
    wrapperClass wrapper = new wrapperClass();
    wrapper.field1 = 'Value for field1';
    wrapper.field2 = 'Value for field2';
    return wrapper;
}

public class wrapperClass {
    @AuraEnabled    public string   field1      {get;set;}
    @AuraEnabled    public string   field2      {get;set;}
    public wrapperClass() {
        this.field1 = field1;
        this.field2 = field2;
    }
}

.js:

import rtnWrapperClass from '@salesforce/apex/HelperAccount.rtnWrapperClass';
// Return  Wrapper Class
@wire(rtnWrapperClass)
    wrapperClass;

HTML:

   <!-- Data from Wrapper Class -->
    <p>Wrapper Class Data...</p>
    <template if:true={wrapperClass.data}>
        <lightning-formatted-text
            value={wrapperClass.field1}>
        </lightning-formatted-text>
    </template>

Answer 1

try this:

<!-- Data from Wrapper Class -->
    <p>Wrapper Class Data...</p>
    <template if:true={wrapperClass.data}>
        <lightning-formatted-text
            value={wrapperClass.data.field1}>
        </lightning-formatted-text>
    </template>